float_Experience 交換を行わずに div モジュールの中央レイアウトを実装する

最も一般的な div CSS Web ページのレイアウト形式: 上部、中央左、中央右、下部の 4 つのモジュール、幅 760 ピクセル、ページ全体が中央に配置されます。

構造コード、左上右下 4 つのモジュールはすべて独立しており、互いに入れ子になっていません。

＜div id="top">頭＜/div＞

＜div id="left">
＜div id="left_module">左＜/div＞ # ##＜/div＞

＜div id="right">
＜div id="right_module">right＜/div＞
＜/div＞

＜ div id="foot" >foot

先頭は通常の定義です。

#top { height:100px; background:#ccc; width:760px; margin:auto; text-align:center;}

方法 A: 外側の左は幅 760px として定義されますおよび Centered; 内側の left_module は 280 ピクセルの実際の左幅として定義され、絶対位置に配置され、上部の値は上部で定義された高さと同じになります。
この方法の利点は、左右の 2 つのモジュール コード スニペットを交換して表示優先度を調整できることです。

#left { 幅:760px; マージン:自動;}
#left_module { 幅:280px; 位置:絶対; トップ:100px; パディング:10px;}

方法 B:外側の左は幅 760 ピクセルで中央に配置され、上部に対して浮動として定義され、内側の left_module は実際の左幅 280 ピクセルとして定義され、絶対位置に配置されます。
この方法の利点は、天板の高さを自由に拡張できることです。

#left { width:760px; margin:auto;position:relative;}
#left_module { width:280px;position:absolute;padding:10px;}

外側の右それは幅 760 ピクセルで中央揃えとして定義され、内側の right_module は実際の右側の幅 440 ピクセルとして定義され、マージン構文を使用して左側に配置されます。 right_module で定義された背景色は実際の右側の背景色、定義された高さは中央モジュールの実際の高さで、右側の背景色は実際の左側の背景色です。

#right { 幅:760px; マージン:自動; 背景:#E8E8E8;}
#right_module { 幅:440px; 背景:#F0F0F0; 高さ:360px; マージン:0 0 0 自動; パディング:10px;}

下も一般的な定義に属します。

#foot { height:100px; background:#ccc; width:760px; margin:auto; text-align:center;}

テスト環境 IE6.0 と FF1.5 両方これは最も下品な構文ですが、非常に単純で実用性は限られていますが、技術的なリファレンスとして使用できます。