我创建了一个min-height的div标签,并将背景色设置为“红色”。但是在mozilla firefox上,当内容超过最小高度限制时,div的高度不会增加。这是我的代码:
<style type="text/css"><!-- ul { display:block; padding:0px; width:500px; } .b { width:250px; float:left; display:block; } div { min-height:50px; width:500px; background-color:red; } --></style> <div> <ul> <li class="b">asdsad</li> <li class="b">asdsad</li> <li class="b">asdsad</li> <li class="b">asdsad</li> <li class="b">asdsad</li> <li class="b">asdsad</li> <li class="b">asdsad</li> </ul> </div>
似乎必须将div高度设置为适合内容,但是我不知道该怎么办。如果我不使用height则不能设置背景色。请告诉我如何使内容适合div,背景颜色将变为红色。 (不知道我是否解释清楚,所以请问我是否想进一步了解该问题。)
-谢谢。
解决: 谢谢大家的 友好 回答。
像这样更新您的css:
div{min-height:50px;width:500px;background-color:red;overflow:hidden;}
overflow:hidden; 添加
overflow:hidden;
基本上,这是由于float:left在.b课堂上发生的 。这就是它的工作方式。通常,您可以通过添加overflow:hidden到父div或添加带有style =“ clear:both;”的元素来修复它。在父div的末尾。
float:left
.b
overflow:hidden
您可以使用“ CSS clearfix”关键字搜索有关它的更多信息。