Html 将 div 放在 float:left div 下方
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7759837/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Put divs below float:left divs
提问by Joseph Duffy
I'm trying to have a site that has the basic structure:
我正在尝试建立一个具有基本结构的站点：
<1 div>
<3 divs next to each other>
<1 div>
The 3 divs are float:left in order to make be on the same level. However, they 5th div (at the bottom) sort of moves up to the top of the 3 divs in IE, and shown like that in Chrome, although the content is below the 3 divs.
I think I've just done some lazy coding here, but don't really know any better.
I've currently got:
3 个 div 是 float:left 以使其处于同一级别。但是，它们的第 5 个 div（在底部）在 IE 中向上移动到 3 个 div 的顶部，并在 Chrome 中显示为那样，尽管内容低于 3 个 div。
我想我只是在这里做了一些懒惰的编码，但真的不知道更好。
我目前有：
<div id="results">
<!-- Ajax Content Here -->
</div>
<div id="leftpanel">
</div>
<div id="photo">
</div>
<div id="top3">
</div>
<div id="voting">
</div>
The results is the top one, leftpanel, photo and top3 are the middle 3, whilst voting is below the 3.
Basic CSS is :
结果是最上面的一个，leftpanel，photo和top3是中间的3个，而投票在3个下面。
基本的CSS是：
#leftpanel {
float:left;
width:20%;
height: 600px;
}
#top3 {
float: left;
width:20%
}
#photo {
width: 60%;
float:left;
text-align: center;
}
#voting {
width: 500px;
height: 250px;
text-align: center;
margin-left: auto;
margin-right: auto;
}
#results{
width: 300px;
height: 20px;
margin-left: auto;
margin-right:auto;
margin-bottom: 5px;
text-align: center;
}
I'm sure it's something silly I'm doing, so any input is much appreciated, I could use to learn how to do this properly :) I previously had a containing div on the 3 middle divs, but this didn't work since the ones inside change size. Maybe I need to do this, but in a different way?
我确定这是我正在做的一些愚蠢的事情，因此非常感谢任何输入，我可以用来学习如何正确执行此操作:) 我以前在 3 个中间 div 上有一个包含 div，但这不起作用，因为里面的那些改变大小。也许我需要这样做，但以不同的方式？
回答by GolezTrol
add clear: bothto the bottom div, so it won't be influenced by the floating other divs, but will move down below them.
添加clear: both到底部 div，因此它不会受到浮动其他 div 的影响，但会向下移动到它们下方。
回答by Eric Rowell
Rather than working with floats, you might consider simply setting the display attribute of the middle divs to "inline-block". Remember that be default, div elements have a block display, which means that they take up the entire width of its parent element, even if its width is less than the parent width. inline blocks on the other hand fit together like puzzle pieces and flow horizontally rather than vertically. I think this would make your code much cleaner than dealing with floats. Here's a demo:
您可以考虑简单地将中间 div 的 display 属性设置为“inline-block”，而不是使用浮点数。请记住，默认情况下，div 元素具有块显示，这意味着它们占据其父元素的整个宽度，即使其宽度小于父元素的宽度。另一方面，内联块像拼图一样组合在一起，水平流动而不是垂直流动。我认为这会让你的代码比处理浮点数更简洁。这是一个演示：
回答by locrizak
You need to clear the floats. If #votingis your fifth div add this in your css.
你需要清除浮动。如果#voting是您的第五个 div，请将其添加到您的 css 中。
#voting{clear:both}
#voting{clear:both}
should do the trick
应该做的伎俩
