まず、ここをクリックして実際の操作効果を確認してください。このページは、mozilla、opera、IE ブラウザーで中央に配置され、高い適応性を持っています。コードを分析してみましょう。
完全なコード
<html>
<頭>
<style type="text/css">
体{
背景:#999;
テキスト整列:中央;
カラー: #333;
フォントファミリー:arial、verdana、sans-serif;
}
＃ヘッダ{
幅:776ピクセル;
マージン右: 自動;
マージン左: 自動;
パディング: 0px;
背景: #EEE;
高さ:60ピクセル;
テキスト整列:左;
} ＃含む{
マージン右: 自動;
マージン左: 自動;
幅: 776ピクセル;
} #メインbg{
幅:776ピクセル;
パディング: 0px;
背景: #60A179;
フロート: 左;
}
＃右{
フロート: 右;
マージン: 2px 0px 2px 0px;
パディング:0px;
幅: 574ピクセル;
背景: #ccd2de;
テキスト整列:左;
}
＃左{
フロート: 左;
マージン: 2px 2px 0px 0px;
パディング: 0px;
背景: #F2F3F7;
幅: 200ピクセル;
テキスト整列:左;
}
#フッター{
クリア:両方;
幅:776ピクセル;
マージン右: 自動;
マージン左: 自動;
パディング: 0px;
背景: #EEE;
高さ:60ピクセル;}
.text{マージン:0px;パディング:20px;}
</スタイル>
</head>
<本文>
<div id="header">ヘッダー</div>
<div id="含む">
<div id="mainbg">
<div id="right">
<div
class="text">右<p>1</p><p>1</p><p>1</p><p>1</p><p>1</p></div >
</div>
<div id="左">
<div class="text">左</div>
</div>
</div>
</div>
<div id="footer">フッター</div>
</body>
</html>
次に、中央の 2 つの列 #right と #left を定義します。中央の 2 つの列を中央に配置するには、その外側にレイヤー #contain をネストし、margin:auto; を contains に設定して、#right と #left が自然に中央に配置されるようにします。
中央の 2 つの列の定義の順序に注意してください。最初に #right を定義し、float: right; を通じて #contain レイヤーの右端にフロートさせます。次に #left を定義し、float: left; を通じて #right レイヤーの左側にフロートさせます。これは、テーブルを左から右に定義した順序とはまったく逆です (訂正: 左が最初で次に右、または最初が右で次に左です。必要に応じてデザインできます)。
コード内の #contain と 2 つの列の間にネストされたレイヤー #mainbg があることがわかります。このレイヤーは何に使用されますか?このレイヤーは #contain の背景を定義するために使用されます。 #contain で背景を直接定義せずに別のレイヤーを追加するのはなぜだろうか、と必ず疑問に思うでしょう。 #contain で直接定義された背景は Mozilla では表示されず、高さの値を定義する必要があるためです。高さの値が定義されている場合、#right レイヤーはコンテンツに応じて自動的に拡大縮小できません。背景と高さの問題を解決するには、#mainbg レイヤーを追加する必要があります。秘訣は、#mainbh レイヤーに対して float: left; を定義することです。これは、float がレイヤーの幅と高さの属性を自動的に与えるためです。 (とりあえずこのように理解しましょう:)
最後に、一番下に #footer レイヤーを定義します。この定義の鍵は、clear:both; です。この文の機能は、#footer レイヤーのフローティング継承をキャンセルすることです。それ以外の場合、#footer は #right の下ではなく #header の隣に表示されます。
主要なレイヤーを定義すると、レイアウトの準備が整います。追加のポイント: .text{margin:0px;padding:20px;} も定義したことがわかりましたが、このクラスの機能は、コンテンツの周囲に 20 ピクセルのマージンを作成することです。 #right でマージンやパディングを直接定義しないのはなぜですか? Mozilla と IE では CSS ボックス モデルの解釈に一貫性がないため、マージンやパディングを直接定義すると Mozilla でレイアウトが変形します。私は通常、内部に別のレイヤーを挿入することで問題を解決します。