Question

我将外部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>

jsFiddle

Answer 1

试试这样..

.question-template {
    width: auto;
    height: auto;
    background-color: blue;
    overflow:auto;
}

Answer 2

这是因为你的两个子元素都向左浮动。这意味着容器不会伸展到包含子元素所需的整个高度。

要解决此问题，您需要在css中添加一个clearfix类：

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

然后将类添加到HTML中：

<div class="question-template clearfix">

有关详细信息，请参阅此处：http://css-tricks.com/snippets/css/clear-fix/

Answer 3

的 Live demo ........... 您好，现在定义父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>

的 Live demo 的

Answer 4

将overflow:auto添加到.question-template

http://jsfiddle.net/4zjtp/2/

Answer 5

您需要在父div上应用一个清除浮点数，以确保它占用内部元素。您可以在父关闭之前插入<div style="clear:left;"></div>，也可以在父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">
...

Working Example

Answer 6

为<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;
 }

CSS背景颜色不起作用

6 个答案: