CSS 背景颜色不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13118418/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS background color not working
提问by SamB
I set the background color of the outer div to blue but it is not displayed. Why?
我将外部 div 的背景颜色设置为蓝色，但未显示。为什么？
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>采纳答案by Xavier
Try like this..
试试这样..
.question-template {
width: auto;
height: auto;
background-color: blue;
overflow:auto;
}
回答by adamdougal
It's because both of your child elements are floated left. This means that the container won't stretch to the full height needed to contain the child elements.
这是因为您的两个子元素都向左浮动。这意味着容器不会拉伸到包含子元素所需的整个高度。
To solve this you need to add a clearfix class such as this to your css:
要解决这个问题，您需要在 css 中添加一个像这样的 clearfix 类：
.clearfix:after {
content: "";
display: table;
clear: both;
}
And then add the class to your HTML like this:
然后将类添加到您的 HTML 中，如下所示：
<div class="question-template clearfix">
See here for more info: http://css-tricks.com/snippets/css/clear-fix/
有关更多信息，请参见此处：http: //css-tricks.com/snippets/css/clear-fix/
回答by Rohit Azad
Live demo...........
Hi now define your parent div.question-template overflow:hidden;
现场演示.......... 嗨，现在定义你的父 div.question-template overflow:hidden;
.question-template{
overflow:hidden;
}
Method two
方法二
now clear your parent
现在清除你的父母
Css
css
.clr{
clear:both;
}
HTML
HTML
<div class="question-template">
<div class="participants">234</div>
<div class="question">Some lorem ipsum text</div>
<div class="clr"></div>
</div>
回答by mshsayem
Add overflow:autoto .question-template
添加overflow:auto到.question-template
回答by Pranav ?
You need to apply a clear the float on the parent div to make sure that it occupies the inner elements.
You could either insert a <div style="clear:left;"></div>before the parent closes or apply a clearfix class on the parent div.
您需要在父 div 上应用 clear the float 以确保它占据内部元素。您可以<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%;
}
?
Then you just add the clearfix class to the parent div
然后你只需将 clearfix 类添加到父 div
...
<div class="question-template clearfix">
...
回答by Vazhumuni M
Use fixed height for <div>element.
It will be like this
对<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;
}
