我有两个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开始的同一高度。

我试过什么？为这两个div创建一个宽度为100%、高度为一定像素的包装器，但没有成功。

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

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

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

Answer 1

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

我不能100%确定你想做什么，是否有意使用绝对定位，但我想你真正想要的是浮动元素。

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;
}

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