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％确定你要做什么以及你是否故意使用绝对定位，但我想你实际上在寻找的是浮动元素。< / p>

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/

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

1 个答案: