0

詳細: 2 つの div があり、 one float:left、 other float:right、および parent はclear:both、ページ上でコンテナーの親を下に並べることができるようにするためです。具体的な CSS は次のとおりです。

#content {
    margin-left:auto;
    margin-right:auto;
    width: 750px;
    margin-top:50px;
    position:relative;
}
.container-div {
    padding-top:7px;
    padding-bottom:10px;
    clear:both;
    background-color:#b0c4de;
}
.left-side {
    float:left;
}
.right-side
    float:right;
}

問題はbackground-color、親の がコンテナーの上部のごく一部しかカバーしていないことです。クロム インスペクターは、コンテンツが明らかにその部分のみであることを示しています。何を与える？フロートされた div をコンテンツとして div に表示させるにはどうすればよいですか?

4

3 に答える 3

2

あなたのDOM構造は多かれ少なかれこのように見えます

<div class="container-div">
    <div class="left-side"></div>
    <div class="right-side"></div>
</div>

クラス コンテナを持つ親 div の幅は 100% です。ここで、親 div 内に幅を与えずに 2 つの子 div をフロートさせようとしています。デフォルトでは、子 div は 100% の幅になります。したがって、子 div の幅を最大 50% に定義する必要があります。そうすれば、float のみが有効になります。

次のコードを試してください

.clear{clear:both}

.container-div {
    padding-top:7px;
    padding-bottom:10px;
    background-color:#b0c4de;
}
.left-side {
    float:left;
    width=50%;
}
.right-side
    float:right;
    width=50%;
}

DOM は次のようになります。

<div class="container-div">
        <div class="left-side">your left divs content</div>
        <div class="right-side">your right divs content</div>
        <div class="clear"></div>
</div>

これで、すべてが正しい場所にあることがわかり、chrome インスペクターが完全に表示されます。

于 2012-05-22T20:35:38.757 に答える
1

子の全高を取得するには、親.container-divを に設定する必要があります。display: inline-block;

于 2012-05-18T15:45:19.053 に答える
1

overflow: auto親に追加してみてください

于 2012-05-18T15:40:23.243 に答える