我有一个100%宽度的bodyMain div.里面是一个带有自动边距的body div 800px(我可以使用'body'作为id？).其中有两个divs bodyLeft和bodyRight分别为200px和600px.当我向内部div添加内容时,bodyMain和body都不会在高度上扩展.所有高度都是自动的.
这是代码:http://jsfiddle.net/TqxHq/18/
HTML:
<body>
<div id="bodyMain">
<div id="body">
<div id="bodyLeft"> left text goes here<br />
</div>
<div id="bodyRight">Right text goes here
</div>
</div>
</div>
</body>
CSS:
#bodyMain{
border:1px solid red;
width:100%;
height:auto;
}
#body{
border:1px solid green;
width:804px;
height:auto;
margin:auto;
}
#bodyLeft{
border:1px solid blue;
float:left;
width:200PX;
height:auto;
}
#bodyRight{
border:1px solid orange;
float:right;
width:600PX;
height:auto;
}
irf*_*csd 40
你必须添加
<div style="clear:both;"></div>
在浮动div的末尾来解决这个问题.看到 这里
当浮动元素位于容器框内并且元素不会自动强制容器的高度调整到浮动元素时,会出现问题.当一个元素浮动时,它的父元素不再包含它,因为浮动元素从流中移除.您可以使用2种方法来修复它:
clear:both
clearfix