我有以下标记：
<html>
<body style="margin:0;padding:0">
<div>
<div style="border:3px solid red; width:70%; position:absolute; left:2.5%">Left</div>
<div style="border:3px solid blue; width:25%; position: absolute; left:72.5%">Right</div>
<div style="border:3px solid black; width:95%; margin: 0 auto">Bottom</div>
</div>
</body>
</html>
我想在这里实现的是三个div如下：
+---------------------------+--------+ |Left |Right | +---------------------------+--------+ |Bottom | +------------------------------------+
然而,在我的标记中,“底部”div与“左”和“左”重叠. “底部”的.
我应该如何设计这3个元素来实现这种效果呢？
请注意,“bottom”不是页面上的最后一个元素.我只想将“左”和“右”放在一行中,并使页面流继续从以下行进行默认定位.
编辑：除了接受的答案…如果您没有静态高度或由于某种原因不想硬编码,您可以实现类似的效果：
<div style="border:3px solid red; width:70%; position:absolute; left:2.5%">Left</div> <div style="border:3px solid blue; width:25%; margin-left:72.5%">Right</div> <div style="border:3px solid black; width:95%; margin: 0 auto">Bottom</div>
解决方法
我认为问题在于,当你有绝对定位的元素时,它们会被从文档流中取出.所以后面的元素看不到它们,假设它们不在那里,然后跳起来.要让你的“底部”div在你的“左”/“右”div之下,你必须给它一个等于它们的高度(或类似的东西)的margin-top.
