ページコンテンツ全体を中央に配置して、高さがコンテンツに合わせて自動的に拡張されるようにする方法

ページコンテンツ全体を中央に配置する方法と、コンテンツに合わせて高さを自動的に拡大縮小する方法。これは、CSS レイアウトを学習するときに最もよくある問題です。以下に実際の例を示し、その後に詳細な説明を示します。

まず、ここをクリックして、実際の実行効果を確認してください。このページは、Mozilla、Opera、IE ブラウザで中央に配置され、高度に適応できます。コードを分析してみましょう:

コードをコピー

コードは次のとおりです。

<html>
<ヘッド>
<スタイルタイプ="text/css">
体{
背景:#999;
テキスト配置:中央;
色: #333;
フォントファミリー:arial、verdana、sans-serif;
}
＃ヘッダ{
幅:776ピクセル;
右マージン: 自動;
左マージン: 自動;
パディング: 0px;
背景: #EEE;
高さ:60px;
テキスト配置:左;
} ＃含む{
右マージン: 自動;
左マージン: 自動;
幅: 776ピクセル;
} #メインbg{
幅:776ピクセル;
パディング: 0px;
背景: #60A179;
フロート: 左;
}
＃右{
フロート: 右;
マージン: 2px 0px 2px 0px;
パディング:0px;
幅: 574ピクセル;
背景: #ccd2de;
テキスト配置:左;
}
＃左{
フロート: 左;
マージン: 2px 2px 0px 0px;
パディング: 0px;
背景: #F2F3F7;
幅: 200ピクセル;
テキスト配置:左;
}
#フッター{
クリア:両方;
幅:776ピクセル;
右マージン: 自動;
左マージン: 自動;
パディング: 0px;
背景: #EEE;
高さ:60px;}
.text{マージン:0px;パディング:20px;}
</スタイル>
</head>
<本文>
<div id="header">ヘッダー</div>
<div id="contain">
<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>
</本文>
</html>

コード分析:
まず、本文と上部の最初の行 #header を定義します。ここで重要なのは、本文の text-align:center; とヘッダーの margin-right: auto;margin-left: auto; です。この 2 つの文によって、ヘッダーが中央に配置されます。注意: 実際、text-align:center; を定義すると IE ではすでに中央揃えが実現されていますが、Mozilla では無効です。Mozilla で中央揃えを実現するには、margin:auto; を設定する必要があります。

次に、中央の 2 つの列 #right と #left を定義します。中央の 2 つの列を中央に配置するには、それらの外側にレイヤー #contain をネストし、contain に margin:auto; を設定して、#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 のすぐ横に表示されます。
メインレイヤーが定義されたので、レイアウトの準備が整いました。もう 1 つ追加する点: .text{margin:0px;padding:20px;} も定義していることがわかります。このクラスの目的は、コンテンツの周囲に 20 ピクセルの空白を作成することです。 #right で直接 margin または padding を定義しないのはなぜですか? Mozilla と IE は CSS ボックスモデルの解釈が異なるため、直接 margin/padding を定義すると、Mozilla でレイアウトが変形します。私は通常、内部に別のレイヤーを追加することでこの問題を解決します。

<<: Docker は MySQL をインストールし、中国語の文字化けの問題を解決します

>>: MySQLシリーズマルチテーブル結合クエリ92および99構文例詳細チュートリアル