Div+CSS布局里父容器自动高的问题
如下面代码示例的一个布局:<div id="box">
<div id="top"></div>
<div id="main"></div>
<div id="bottom"></div>
</div>
CSS代码如下:
#box {
width: 202px;
margin: 0 auto;
padding: 2px;
border: 1px solid #999999;
}
#top {
height: 30px;
width: 200px;
float: left;
margin-bottom: 2px;
border: 1px solid #99CCCC;
}
#main {
height: 150px;
width: 200px;
float: left;
margin-bottom: 2px;
border: 1px solid #FFCC99;
}
#bottom {
height: 20px;
width: 200px;
float: left;
border: 1px solid #CCCC99;
}
这里ID="box"的容器不指定高,如果不添加float: left;的话,那么所有浏览器显示效果如图1所示,但如果添加上float: left;后,Dreamweaver和Firefox的显示效果就如图2所示了。虽然IE7的显示效果始终是图1所示,不过……都知道IE不是一个符合标准的浏览器。
在这个例子中加不加浮动控制无大碍,但在复杂点的布局中肯定是需要用到的。请问大家这问题怎么解决?
图1:
图2:
[[it] 本帖最后由 zys4416 于 2008-7-23 10:47 编辑 [/it]]