I set the background color of the outer div to blue but it is not displayed. Why?
A demo of it:
.question-template {
width: auto;
height: auto;
background-color: blue;
}
.question {
float: left;
margin: 10px;
}
.participants {
background-color: green;
float: left;
margin: 10px;
}<body>
<div class="question-template">
<div class="participants">234</div>
<div class="question">Some lorem ipsum text</div>
</div>
</body>试试这样..
.question-template {
width: auto;
height: auto;
background-color: blue;
overflow:auto;
}
小智 5
这是因为您的两个子元素都向左浮动。这意味着容器不会拉伸到包含子元素所需的整个高度。
要解决这个问题，您需要在 css 中添加一个像这样的 clearfix 类：
.clearfix:after {
content: "";
display: table;
clear: both;
}
然后将类添加到您的 HTML 中，如下所示：
<div class="question-template clearfix">
有关更多信息，请参见此处：http : //css-tricks.com/snippets/css/clear-fix/