外部div的高度不会与内部div扩展 [英] Height of outer div not expanding with inner div
问题描述
这是代码： http：// jsfiddle。 net / TqxHq / 18 /
HTML：
<身体GT;
< div id =bodyMain>
< div id =body>
< div id =bodyLeft>左文本在这里< br />
< / div>
< div id =bodyRight>正确的文字在这里
< / div>
< / div>
< / div>
< / body>
CSS：
code> #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;
}
您必须添加
< div style =clear：both;>< / div>
在浮动div的末尾修复此问题。请参阅
here
问题当浮动元素位于容器框内时，元素不会自动强制容器的高度调整到浮动元素。当一个元素浮动时，它的父代不再包含它，因为浮动是从流中移除的。您可以使用两种方法来解决它：
清除：
clearfix
I have a bodyMain div of 100% width. Inside it is a body div 800px with auto margin(can I use 'body' as id ?). Inside this are two divs bodyLeft and bodyRight 200px and 600px wide respectively. When I add content to inner divs neither bodyMain nor body expands in height . All heights are auto.
Here is the code: 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;
}
You must add
<div style="clear:both;"></div>
at the end of floating div to fix this issue. see here
Problem happens when a floated element is within a container box and element does not automatically force the container’s height adjust to the floated element. When an element is floated, its parent no longer contains it because the float is removed from the flow. You can use 2 methods to fix it:
clear:both
clearfix
这篇关于外部div的高度不会与内部div扩展的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
