0

次のhtmlコードを作成しました：

<div id="wrapper">
    <section id="main-body">
       <section id="post-section">
       </section>
     </section>
</div>

CSS

#wrapper
{
margin:0 auto;
width:1000px;
min-height:600px;

}
#main-body
{
width:100%;
min-height:1000px;
border:1px solid black;
border-radius:10px;
}
 #post-section
{
float:left;
width:800px;
min-height:1100px;
border-right:1px solid gray;
background:plum;
}

問題は、ラッパーの「本体」サイズの最小高さが増加しているためですが、「ラッパー」と「本体」の「ポストセクション」サイズが原因で増加していません。

4

2 に答える 2

0

「クリアフィックス」が必要です。次の CSS ルールを追加します。

main-body:after {
    content: ".";
    height: 0;
    display: block;
    clear: left;
}

これがフィドルです：http://jsfiddle.net/EM77F/2/

于 2013-10-07T12:52:02.327 に答える
0

問題は、 で使用float: leftしていることです#post-section。

解決策 1:

浮きを落とす：左。しかし、おそらくそれが必要です (そうでなければ、そこにはありません)。

解決策 2:

に追加overflow: autoすると#main-content、考慮すべきフローティング アイテムがあることがブラウザに認識されます。そして箱が広がります。幅を最小幅に調整するか、水平スクロールバーを受け入れる必要があることに注意してください

解決策 3

の後にクリア br を追加し#post-sectionます。

<div id="wrapper">
    <section id="main-body">
        <section id="post-section">
        </section>
    <br style="clear: both;" />
    </section>
</div>
于 2013-10-07T12:54:14.743 に答える