2

いくつかの部門を作成し、部門ごとに異なる背景を適用しようとしていますが、コードが期待どおりに機能しません。

HTML

<div class="main">
    <div id="div1">Im in div-1</div>
    <div id="div2"></div>
    <div id="div3"></div>
</div>

CSS

.main{
    background-color:red;
}
#div1 {
    height:200px;
    width:100px;
    float:left
}
#div2 {
    height:200px;
    width:500px;
    float:left
}

各 ID の背景色を設定すると、期待どおりに機能しますが、クラスを設定すると機能しません。

4

3 に答える 3

4

動作しますが、フローティング div が親によってラップされていないため、表示されません。

overflow:hidden親divに追加

フィドル

于 2013-08-12T03:08:49.737 に答える
2

ここで、U は構造マークアップを使用せずにフローティング ディビジョン (div) のクリアを使用することでこれを実現できます。構造とプレゼンテーションを混在させることなく、レイアウトの問題やブラウザーの不一致を解決するのに非常に効果的です。

これを読む

http://perishablepress.com/lessons-learned-concerning-the-clearfix-css-hack/

http://css-tricks.com/snippets/css/clear-fix/

これを試して -

<div class="main clearfix">
    <div id="div1">Im in div-1</div>
    <div id="div2"></div>
    <div id="div3"></div>
</div>

あなたのCSSで - これを追加してください

.clearfix:after {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
}

デモ

于 2013-08-12T03:31:20.713 に答える
0

親 divに追加する必要があるoverflow:hidden;ため、次のようになります。 .main{ overflow: hidden; background-color:red; }

于 2013-08-12T03:15:45.530 に答える