4

これが私のコードです：

HTML

<div id="body">
    <div id="left">a</div>
    <div id="main">b</div>
    <div id="right">c</div>
</div>

CSS:

#body {    width: 520px;    border:solid 10px #d2d2d2;}
#left { float:left;width:170px;height:200px}
#main { float:left;width:170px;height:400px}
#right { float:left;width:170px;height:200px}

#body で div#left、#div#main、div#right を囲まない理由

表示を設定した場合：テーブルは大丈夫です

4

4 に答える 4

23

#body cssにoverflow:hiddenを追加。

#body {    width: 520px;    border:solid 10px #d2d2d2; overflow:hidden;}

また

親要素で任意のクラス (clearfix など) を使用します。CSS トリックの記事を参照してください: https://css-tricks.com/snippets/css/clear-fix/

于 2012-06-04T10:14:43.133 に答える
12

このfloatプロパティは、複数の段落を折り返す画像などに使用することを目的としているため、コンテンツを含むブロックの下部からコンテンツをドロップできるように設計されています。

詳細と例については、フロートを含むを参照してください。

overflow: hiddenオンに設定#bodyすると、コンテナーが拡張され、その中にすべての浮動要素が含まれます。または、他のテクニックを参照してください。

特に古いバージョンの Internet Explorer では機能しませんが、もう 1 つの方法は、display: inline-block代わりに を使用することですfloat。

于 2012-06-04T10:14:51.323 に答える
4 
 #body { 
    overflow:hidden;
 }
于 2012-06-04T10:16:54.940 に答える
3

これを試して：

<div id="body">
    <div id="left">a</div>
    <div id="main">b</div>
    <div id="right">c</div>
    <div style="clear:both;"></div>
</div>
于 2012-06-04T10:14:02.260 に答える