非常简单的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”属性，但这并没有解决问题。我总是以一种草率的方式绕过这个看似奇怪的行为，但想找到一个更好的做法。
非常感谢任何帮助或指示！
答案 0 :(得分：14)
在第一个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将保持其位置..
答案 1 :(得分：5)
尝试新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>
答案 2 :(得分：2)
我会添加一个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 style="clear:both;"></div>
</div>
<div id="bottom div"><img src="images/xlab.jpg" width="200px" height="200px" /></div>
答案 3 :(得分：0)
我认为上面提到的关于 style =“clear：both;”的建议都是正确的。但是，我可能会尝试将该样式添加到现有的“底行”div中。它可能会为您节省添加新的div。
答案 4 :(得分：0)
我希望它不迟，但我遇到了同样的问题而且只是想出来了。与底部Div有关。底部div的高度和宽度设置为100％，底部div也设置溢出自动。现在div不会向上移动以填补空间。