我不能让div坐在另一个具有不同高度的div下方20 px处

Question

我知道这可能很简单，但我尝试过使用所有位置设置，浮动和嵌套。由于动态创建的文本，顶部div的高度不同，我需要它下面的div比顶部div低20px。任何帮助是极大的赞赏。 我知道我的立场是绝对的，但这只是为了展示我正在寻找的东西。

#wrapper {
    position:absolute;
    width:341px;
    height:371px;
    z-index:1;
    border: solid #777 1px;
}
#topbox {
    position:absolute;
    width:280px;
    z-index:1;
    padding: 30px;
    border: solid #000 1px;
    top: 7px;
}
#bottombox {
    position:absolute;
    width:280px;
    z-index:1;
    padding: 30px;
    top: 136px;
    border: solid #000 1px;
}
<div id="wrapper">
  <div id="topbox">Top text  box #1. The text is dynamically created  here with a height that will vary. </div>
  <div id="bottombox">Bottom text box #2. The text is dynamically created here with a height that will vary and needs to be 20px below the bottom of the top text box.</div>
</div>

Answer 1

查看您拥有的CSS，问题是您正在使用absolute定位。对于这样的任务，您应该使用relative定位。在jsFiddle上显示它在行动＆amp;这是我调整后实现的CSS：

#wrapper
{
    position: relative;
    float: left;
    display: inline;
    width: 341px;
    min-height: 371px;
    z-index: 1;
    border: solid #777 1px;
}

#topbox
{
    position: relative;
    float: left;
    display: inline;
    width: 280px;
    z-index: 1;
    padding: 30px;
    margin: 7px 0 0 0;
    border: solid #000 1px;
}

#bottombox
{
    position: relative;
    float: left;
    display: inline;
    width: 280px;
    z-index: 1;
    padding: 30px;
    margin: 20px 0 0 0;
    border: solid #000 1px;
}

以下是我现在在本地浏览器中呈现的方式：

我也看了你的CSS＆amp;合并/合并它，因为我发现重复代码在调试这样的项目时会引起混淆。以下是我编写代码的方法：

#wrapper, #topbox, #bottombox
{
    position: relative;
    float: left;
    display: inline;
}

#topbox, #bottombox
{
    width: 280px;
    z-index: 1;
    padding: 30px;
    border: solid #000 1px;
}

#wrapper
{
    width: 341px;
    min-height: 371px;
    z-index: 1;
    border: solid #777 1px;
}

#topbox { margin: 7px 0 0 0; }
#bottombox { margin: 20px 0 0 0; }

Answer 2

要为#topBox提供底部边距，您只需使用：

#topBox {
  margin-bottom: 20px;
}

问题在于，因为你使用position: absolute元素会跳出正常流程，并且不再相互关联。