css - 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 属性。如果没有 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 内做额外的样式。