将div放在float下面:left divs

Question

我正在尝试拥有一个具有基本结构的网站:

<1 div>  
<3 divs next to each other>  
<1 div> 

3个div是浮动的:左边是为了使它们处于同一水平.然而,他们的第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>

结果是前一个,左侧面板,照片和顶部3是中间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;
}

我确定这是愚蠢的我正在做的事情,所以任何输入都非常感激,我可以用来学习如何正确地做到这一点:)我以前在3个中间div上有一个包含div,但这不起作用里面的变化大小.也许我需要这样做,但以不同的方式？

Answer 1

添加clear: both到底部div,因此它不会受浮动的其他div的影响.

Answer 2

您可以考虑简单地将中间div的display属性设置为"inline-block",而不是使用浮点数.请记住,默认情况下,div元素具有块显示,这意味着它们占据其父元素的整个宽度,即使其宽度小于父宽度.另一方面,内嵌块像拼图一样装配在一起,水平流动而不是垂直流动.我认为这会使你的代码比处理浮动更干净.这是一个演示:

http://jsfiddle.net/scMFC/

Answer 3

你需要清除浮子.如果#voting你的第五个div在你的CSS中添加它.

#voting{clear:both}

应该做的伎俩