我有两个div(一个在另一个内部)并且当我将一个内部浮动到"left"时遇到了一些问题.问题是外部div不会扩展其高度以适应内部div内部的文本.由于这可能相当令人困惑,我将尝试用一些代码来解释它.
HTML:
<body>
<div id="div1">
Inner Div:
<div id="div2">Testing long content.</div>
</div>
</body>
CSS:
#div2 {
float: left;
width: 10px;
}
我宁愿希望在测试时这实际上显示了我的问题,因为我没有机会测试这个.我的真实代码有更多的属性,如果需要我将构建这些属性.
Sam*_*son 28
您需要使用clear-fix.在浮动div之后插入以下内容,并在包含div中.
<div class="clear"></div>
并添加以下样式:
.clear { clear:both; }
例:
<div class="container">
<div class="floatedDiv">Hello World</div>
<div class="clear"></div>
</div>
如果您不想在html中添加额外的标记或向外部div添加宽度,可以使用:
#div1 {
overflow:hidden; /* clears float for most browsers */
zoom:1; /* clears float for IE6 */
}
也许方便注意,还有一个众所周知的clearfix代码来自positioniseverything专门为这个问题编写,并且可能是最强大和最容易在任何情况下应用.CSS看起来如下:
<style>
div.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
div.clearfix { display: inline-block; margin: 0 0 8px 0; }
/* Hides from IE-mac \*/
* html div.clearfix { height: 1%; }
div.clearfix { display: block; }
/* End hide from IE-mac */
</style>
为了在您的情况下使用它,您将执行以下操作:
<body>
<div id="div1" class="clearfix" >Inner Div:
<div id="div2">Testing long content.</div>
</div>
</body>