css - CSS の背景色が機能しない

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>

jsフィドル

score 8 · Accepted Answer

このようにしてみてください..

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

score 6 · Accepted Answer

これは、両方の子要素が左にフロートされているためです。これは、子要素を含めるために必要な高さまでコンテナが伸びないことを意味します。

これを解決するには、次のような clearfix クラスを css に追加する必要があります。

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

そして、次のようにクラスを HTML に追加します。

<div class="question-template clearfix">

詳細については、こちらをご覧ください: http://css-tricks.com/snippets/css/clear-fix/

score 3 · Accepted Answer

ライブデモ........... こんにちは、親 divを定義します .question-template overflow:hidden;

.question-template{
overflow:hidden;
}

方法 2

今すぐあなたの親をクリアしてください

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>

ライブデモ

score 1 · Accepted Answer

親 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">
...

実施例

score 1 · Accepted Answer

1

overflow:autoに追加.question-template

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

于 2012-10-29T08:57:52.997 に答える

score -2 · Accepted Answer

要素に固定の高さを使用し<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 - CSS の背景色が機能しない

6 に答える 6

Related

Reference