Html 如何在定义了浮动的情况下阻止 <div> 相互移动？

How to stop <div>s from moving into each other with float defined?

提问by Eric

Very straightforward CSS question that I haven't been able to find the answer to so far:

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

I'm trying to lay out a page with two div's side-by-side in one row (using float:left; and float:right;) and then one div below them. The problem is that if the top row (defined as a div itself) is so wide that the space between the two divs can accomodate the bottom div, the bottom div moves up into the top row creating the appearance of a single row of three divs. I don't know if that's clear or not, but here's the code:

我正在尝试布置一个页面，其中两个 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>

So, as above, since the top div has a 200px gap in between its left and right child elements, the image in the bottom div slides up between them. If I make the top div's width 399px that doesn't happen. I tried using the CSS "clear" property but that didn't solve the problem. I've always just worked my way around this seemingly-odd behavior in a sloppy way but want to find a better practice.

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

Any help or direction is greatly appreciated!

非常感谢任何帮助或指导！

回答by Gabriele Petrioli

Use overflow:autoon the first div

使用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>

it will cause the container div to expand to the contents of its children and so the following div will maintain its location..

它会导致容器 div 扩展到其子项的内容，因此接下来的 div 将保持其位置..

回答by mnemosyn

Try the 'clear' attribute on a new div:

在新的 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>

回答by David Radcliffe

I would add a div to clear the floats:

我会添加一个 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>

回答by Upperstage

I think the suggestions above concerning style="clear:both;"are spot on. However, I might try adding that style to your existing "bottom row" div. It might save you adding a new div.

我认为上面关于style="clear:both;" 的建议 是现货。但是，我可能会尝试将该样式添加到您现有的“底行”div。它可能会节省您添加新 div 的时间。

回答by Gabriel

I hope its not late but I was having the same problem and just figured this out. Has to do with the bottom Div. Set height and width to 100% for the bottom div and set overflow auto on the bottom div as well. Now the div will not move up to fill space.

我希望它不会迟到，但我遇到了同样的问题，只是想通了这一点。与底部 Div 有关。将底部 div 的高度和宽度设置为 100%，并在底部 div 上设置溢出自动。现在 div 不会向上移动以填充空间。