抱歉,如果标题难以理解,难以用语言解释。
这是我的 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 下面的代码提供它自己的位置属性。全部失败。
我看过很多类似的问题,但我也没有发现任何有意义或有用的问题。
最佳答案
您需要从包装器中取出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/
关于html - 我有两个div,分别是右边300px,左边300px。放在 div 代码下面的任何东西仍然出现在相同的高度?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26877269/