CSS で float の高さを複数の div に適応させる 2 つの方法

複数の div float を CSS で並べて表示すると、高さが適応 (自動増加) します

Div + CSS を使用して 3 列または 2 列のレイアウトを作成する場合、Table を使用して 2 列の高さを簡単に作成できます (または3列）同じですが、Div + CSSを使用するのはさらに面倒です。一般的には、背景画像の塗りつぶしやJSスクリプトを使って高さを揃えることがほとんどです。

方法 1: 純粋な CSS ソリューション (「隠しコンテナー オーバーフロー」と「正の内側パッチ」および「負の外側パッチ」を組み合わせた方法):

<style type="text/css">
<!--
#wrap{overflow:hidden;}
#sidebar_left,#sidebar_right{padding-bottom:100000px;margin-bottom:-100000px;}
-->
</style>
<div id="wrap" style="width:300px; background:#FFFF00;">
    <div id="sidebar_left" style="float:left;width:100px; height:1000px; background:#FF0000;">Left</div>
    <div id="sidebar_mid" style="float:left;width:100px; background:#666;">
    Middle<br />
    Middle<br />
    Middle<br />
    Middle<br />
    Middle<br />
    Middle<br />
    Middle<br />
    Middle<br />
    Middle<br />
    </div>
    <div id="sidebar_right" style="float:right;width:100px; height:500px; background:#0000FF;">Right</div>
</div>

方法 2: js ソリューション (アイデア、この方法は推奨されません) :

りー

以上がCSS で float の高さを複数の div に適応させる 2 つの方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。