float_CSS/HTMLを使用しないモジュールセンターレイアウトの実装

float_CSS/HTML を使用せずに中央揃えのモジュール レイアウトを実現します

最も一般的で実用的なレイアウト形式: 上部、中央左、中央右、下部の 4 つのモジュール、幅 760px、ページ全体が中央揃え。

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

＜p id="top"＞head＜/p＞
＜p id="left"＞  ＜p id="left_module"＞left＜/p＞＜/p＞
＜p id="right"＞  ＜p id="right_module"＞right＜/p＞＜/p＞
＜p id="foot" ＞foot＜/p＞

上部は一般的な定義に属します。

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

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

#left { width:760px; margin:auto;}
  #left_module { width:280px; position:absolute; top:100px; padding: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 { width:760px; margin:auto; background:#E8E8E8;}
  #right_module { width:440px; background:#F0F0F0; height:360px; margin:0 0 0 auto; padding:10px;}

Bottom も従来の定義に当てはまります。

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

テスト環境 IE6.0 および FF1.5 の構文は非常に単純であり、技術的なリファレンスとして使用することはできません。

上記は、float を使用しない module centerlayout_CSS/HTML の実装の内容です。さらに関連した内容については、PHP 中国語 Web サイト (www.php.cn) を参照してください。 ！