Div定位不明确

Question

我的页面上有以下代码块

<div style="width:100%; ">//div0
<div style="width:50%; background:#f1f1f1; border:4px solid #fff; ">//div1
Image1
</div>
<div style="width:50%; background:#f1f1f1; border:4px solid #fff; ">//div2
Image 2
</div>
</div>

我想要的是，这两个div应合并为一个更大的div。因为它们的宽度分别为50％，它们应该左右定位，但实际上，div2位于div1

以下

有人可以解释我该怎么办？我的简单代码有什么问题？

Answer 1

这是一个非常基本的CSS问题。你应该研究的是CSS中的float属性。如果没有浮动，页面上的所有元素都会一个接一个地定位。

<div style="width:50%; background:#f1f1f1; border:4px solid #fff; float: left;">//div1
Image1
</div>
<div style="width:50%; background:#f1f1f1; border:4px solid #fff; float: right;">//div2
Image 2
</div>

那应该达到你想要的效果。

编辑：实际上上述情况也不起作用。因为你有边框。想想就是这样。您的页面宽度为100％。如果您的页面宽度为1000px。您的div将占据屏幕区域的50％或500px。您的边框将占用4 x 2 = 8px或页面的0.8％。总计，您将累计达到该页面的101.6％。这将迫使div一个接一个地加载。

要实际见证左右浮动的效果，请删除边框或缩小宽度：

<div style="width:45%; background:#f1f1f1; border:4px solid #fff; float: left;">//div1
Image1
</div>
<div style="width:45%; background:#f1f1f1; border:4px solid #fff; float: right;">//div2
Image 2
</div>

<div style="width:50%; background:#f1f1f1; float: left;">//div1
Image1
</div>
<div style="width:50%; background:#f1f1f1; float: right;">//div2
Image 2
</div>

另请注意，根据您的页面宽度，您的百分比会产生不同的效果。 45％和4px边框不会一直很好地发挥作用。如果你想要全屏完美定位左右框，最好不要使用边框，并在每个div中做额外的样式。