html – 将div放在float下面:left divs

前端之家收集整理的这篇文章主要介绍了html – 将div放在float下面:left divs前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我想要一个具有基本结构的网站:
<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>

结果是顶部,左图,照片和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;
}

我确定这是愚蠢的我在做,所以任何输入是非常感谢,我可以用来学习如何正确地做到这一点:)我以前有一个包含在3个中间div的div,但这没有工作,因为那些里面的变化大小.也许我需要这样做,但是用不同的方法呢?

解决方法

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

http://jsfiddle.net/scMFC/

猜你在找的HTML相关文章