非常简单的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“清除”属性,但这并没有解决问题.我总是以一种草率的方式绕过这个看似奇怪的行为,但想找到一个更好的做法.
任何帮助或方向非常感谢！
解决方法
在第一个div上使用overflow：auto
<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将保持其位置.
