在float:left的div下面放置divs

Question

我想要一个基本结构的网站：

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

为了让三个div处于同一水平线，它们是采用float:left属性的。然而，在IE中，第五个div（在底部）会向上移动到三个div的顶部，并且在Chrome中也是这样显示的，尽管内容位于三个div之下。
我认为我只是偷懒编码了，但真的不太清楚该怎么做更好。
目前我的代码是：

<div id="results">
<!-- Ajax Content Here -->
</div>
<div id="leftpanel">
</div>
<div id="photo">
</div>
<div id="top3">
</div>
<div id="voting">
</div>

结果是最上面的一个，leftpanel、photo和top3是中间的三个，投票在这三个下面。
基本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，但由于里面的div大小会改变，所以这样不起作用。也许我需要这样做，但用不同的方式？

- Joseph Duffy

Answer 1

在底部的 div 中添加 clear: both，这样它就不会受到浮动其他 div 的影响，而是会向下移动到它们下面。

- GolezTrol

Answer 2

与其使用浮动布局，您可以考虑将中间div的display属性设置为"inline-block"。请记住，默认情况下，div元素具有块显示，这意味着它们占用父元素的整个宽度，即使它的宽度小于父元素的宽度也是如此。而内联块则像拼图一样配合在一起并水平流动，而不是竖直方向。我认为这会比处理浮动更加简洁。这是一个演示：

http://jsfiddle.net/scMFC/

- Eric Rowell

Answer 3

您需要清除浮动。如果 #voting 是您的第五个 div，请在您的 css 中添加以下内容。

#voting{clear:both}

应该就可以解决问题了。

- locrizak