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}

应该做的伎俩

将div放在float下面：left divs

3 个答案: