[英]How to stop <div>s from moving into each other with float defined?
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. 我试图在一行中放置一个两个div并排的页面(使用float:left;和float:right;),然后在它们下面放一个div。 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.
问题是如果顶行(定义为div本身)太宽以至于两个div之间的空间可以容纳底部div,则底部div向上移动到顶行,创建一行三个div的外观。 I don't know if that's clear or not, but here's the code:
我不知道是否清楚,但这是代码:
<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. 因此,如上所述,由于顶部div在其左右子元素之间具有200px的间隙,因此底部div中的图像在它们之间向上滑动。 If I make the top div's width 399px that doesn't happen.
如果我使顶部div的宽度399px不会发生。 I tried using the CSS "clear" property but that didn't solve the problem.
我尝试使用CSS“clear”属性,但这并没有解决问题。 I've always just worked my way around this seemingly-odd behavior in a sloppy way but want to find a better practice.
我总是只是以一种草率的方式绕过这个看似奇怪的行为,但想找到一个更好的做法。
Any help or direction is greatly appreciated! 任何帮助或方向非常感谢!
Use overflow:auto
on the first div 在第一个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>
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将保持其位置。
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>
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>
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.
但是,我可能会尝试将该样式添加到现有的“底行”div中。 It might save you adding a new div.
它可能会为您节省添加新div。
I hope its not late but I was having the same problem and just figured this out. 我希望它不迟,但我遇到了同样的问题,只是想出来了。 Has to do with the bottom Div.
与底部Div有关。 Set height and width to 100% for the bottom div and set overflow auto on the bottom div as well.
底部div的高度和宽度设置为100%,底部div也设置溢出自动。 Now the div will not move up to fill space.
现在div不会向上移动以填补空间。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.