html - 我有两个div，分别是右边300px，左边300px。放在 div 代码下面的任何东西仍然出现在相同的高度？

Question

抱歉，如果标题难以理解，难以用语言解释。

这是我的 CSS:

#container {position:absolute; left:500px; width: 300px; clear: both;}
#container2 {position:absolute; right:500px; width: 300px; clear:both;}
#image {width: 100%;}
#text {text-align: center;}

和我的 HTML:

<div id="container">
  stuff
</div>
<div id="container2">
  more stuff
</div>

而且它有效。本质上，在下面有居中文本的图像旁边有一个居中文本的图像。我的问题是，无论我在下面放置什么代码，仍然会出现在两个 div 开始时的相同高度。

我尝试了什么？为两个 100% 宽度和一定数量的高度像素的 div 创建一个包装器，但这没有用。

#wrapper {position:absolute; width:100%; height:360px;}

相对和绝对位置的随机分类，并为 div 下面的代码提供它自己的位置属性。全部失败。

我看过很多类似的问题，但我也没有发现任何有意义或有用的问题。

Answer 1

您需要从包装器中取出position: absolute。参见 http://jsfiddle.net/tbnrLfbe/

我不是 100% 确定您正在尝试做什么以及您是否有意使用绝对定位，但我想您实际上正在寻找的是 float 元素。

HTML:

<div id="wrapper">
    <div id="container">
        Line1<br>Line2<br>Line3
    </div>
    <div id="container2">
        more stuff
    </div>

    <div class="clear"></div>
</div>

Test

CSS:

#wrapper {
    width: 600px;
}

#container, #container2 {
    width: 300px;
    float: left;
}

.clear {
    clear: both;
}

这样你就不需要在 wrapper 上设置固定高度，内容会自然流动。参见 http://jsfiddle.net/tbnrLfbe/1/