我的页面上有以下代码块
<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
有人可以解释一下我应该怎么做吗?我的简单代码有什么问题?
最佳答案
这是一个非常基本的 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 内做额外的样式。
关于css - Div定位不明确,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9588339/