如何使用float定义阻止<div>进入彼此？

Question

非常简单的CSS问题,到目前为止我还没有找到答案:

我试图在一行中放置一个两个div并排的页面(使用float:left;和float:right;),然后在它们下面放一个div.问题是如果顶行(定义为div本身)太宽以至于两个div之间的空间可以容纳底部div,则底部div向上移动到顶行,创建一行三个div的外观.我不知道是否清楚,但这是代码:

<div id="top div" style="width:400px;">
<div style="float:left;"><img src="images/xlab.jpg" width="100px" height="200px" /></div>
<div style="float:right;"><img src="images/ucbseal.jpg" width="100px" height="250px" /></div>
</div>

<div id="bottom div"><img src="images/xlab.jpg" width="200px" height="200px" /></div>

因此,如上所述,由于顶部div在其左右子元素之间具有200px的间隙,因此底部div中的图像在它们之间向上滑动.如果我使顶部div的宽度399px不会发生.我尝试使用CSS"clear"属性,但这并没有解决问题.我总是只是以一种草率的方式绕过这个看似奇怪的行为,但想找到一个更好的做法.

任何帮助或方向非常感谢!

Answer 1

使用overflow:auto上的第一个div

<div id="top div" style="width:400px;overflow:auto;">
<div style="float:left;"><img src="images/xlab.jpg" width="100px" height="200px" /></div>
<div style="float:right;"><img src="images/ucbseal.jpg" width="100px" height="250px" /></div>
</div>

<div id="bottom div"><img src="images/xlab.jpg" width="200px" height="200px" /></div>

它会导致容器div扩展到其子容器的内容,因此以下div将保持其位置.

Answer 2

尝试新div上的'clear'属性:

<div id="top_div" style="width:400px;"> 
<div style="float:left;"><img src="images/xlab.jpg" width="100px" height="200px" /></div> 
<div style="float:right;"><img src="images/ucbseal.jpg" width="100px" height="250px" /></div> 
<div style="clear: both;" />
</div> 

<div id="bottom_div"><img src="images/xlab.jpg" width="200px" height="200px" /></div>