位置之后的静态元素：绝对 [英] Static elements after position:absolute
问题描述
我有以下标记：
< 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个元素来达到这个效果？注意底部不是页面上的最后一个元素。我只是简单地将左和右放在一行中，页面流从下面的行继续默认放置。
编辑：除了接受的答案...如果您没有静态高度或由于某种原因不想对其进行硬编码，您可以实现类似的效果与：
< div style =border：3px solid red; width：70％; position：absolute; left：2.5 ％>左和LT; / 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 >类似）。
I have the following markup:
<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>
What I am trying to achieve here is three divs layed out like this:
+---------------------------+--------+
|Left |Right |
+---------------------------+--------+
|Bottom |
+------------------------------------+
However, with my markup the "bottom" div is overlapping with the "left" & "bottom" ones.
How should I style those 3 elements to achieve this effect?
Note that "bottom" is not the last element on the page. I would simply like "left" and "right" to be in one line and for the page flow to continue with default positioning from the following lines.
EDIT: In addition to the accepted answer... If you don't have static heights or for some reason don't want to hardcode it, you can achieve similar effect with:
<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>
I think the problem is that when you have elements positioned absolutely, they are taken out of the document flow. So the elements that come after can't see them, assume they aren't there, and jump up. To just get your "bottom" div to be under your "left"/"right" divs, you have to give it a margin-top equal to their heights (or something similar to that).
这篇关于位置之后的静态元素：绝对的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
