我将外部 div 的背景颜色设置为蓝色，但未显示。为什么？
它的演示：
.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;
}
这是因为您的两个子元素都向左浮动。这意味着容器不会拉伸到包含子元素所需的完整高度。
为了解决这个问题，你需要在你的 CSS 中添加一个这样的 clearfix 类：
.clearfix:after {
content: "";
display: table;
clear: both;
}
然后像这样将类添加到您的 HTML 中：
<div class="question-template clearfix">
有关更多信息，请参见此处：http: //css-tricks.com/snippets/css/clear-fix/
现场演示............嗨，现在定义你的父 div .question-template overflow:hidden;
.question-template{
overflow:hidden;
}
方法二
现在清除你的父母
CSS
.clr{
clear:both;
}
HTML
<div class="question-template">
<div class="participants">234</div>
<div class="question">Some lorem ipsum text</div>
<div class="clr"></div>
</div>
添加overflow:auto到.question-template
您需要在父 div 上应用清除浮动以确保它占据内部元素。您可以<div style="clear:left;"></div>在父级关闭之前插入 a 或在父级 div 上应用 clearfix 类。
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix {
display: inline-block;
}
html[xmlns] .clearfix {
display: block;
}
* html .clearfix {
height: 1%;
}
然后你只需将 clearfix 类添加到父 div
...
<div class="question-template clearfix">
...
<div>对元素使用固定高度。会是这样
.question-template {
width: auto;
height: 150px;
background-color: blue;
}
.question {
float: left;
margin: 10px;
color: white;
}
.participants {
background-color: green;
float: left;
margin: 10px;
}