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

ページコンテンツ全体を中央に配置して、高さがコンテンツに合わせて自動的に拡張されるようにする方法
ページコンテンツ全体を中央に配置する方法と、コンテンツに合わせて高さを自動的に拡大縮小する方法。これは、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構文例詳細チュートリアル

推薦する

MySQL 8.0.19 のインストールと設定方法のグラフィックチュートリアル

この記事は、参考のためにMySQL 8.0.19のインストールと設定のグラフィックチュートリアルを記...

JavaScriptのvar let constの違いは何ですか?

目次1. 繰り返し宣言1.1 変数1.2 しましょう1.3 定数2. 可変プロモーション2.1 変数...

MySQL 5.6.37 (zip) ダウンロード インストール 構成 グラフィック チュートリアル

この記事では、MySQL 5.6.37のダウンロード、インストール、設定のチュートリアルを参考までに...

Linuxサーバ侵入緊急対応記録(概要)

最近、お客様から支援の依頼を受けました。管理されている通信コンピュータ ルームから、サーバーの 1 ...

MySQLは外部SQLスクリプトファイルのコマンドを実行します

目次1. SQLコマンドを含むSQLスクリプトファイルを作成する2. SQLスクリプトファイルを実行...

インデックススキャンを使用したMySQLソート

目次sakilaをインストールするインデックススキャンソートテーブル構造インデックススキャンをソート...

Dockerを使用してSpringBootプロジェクトをデプロイする方法

Docker テクノロジの開発により、マイクロサービスの実装にさらに便利な環境が提供されます。Doc...

MySQLにおける区切り文字の定義と機能の詳細な説明

MySQL を初めて学ぶときは、区切り文字の本当の目的を理解していないかもしれません。区切り文字は、...

EChartsマウスイベント処理方法の詳細な説明

イベントとは、クリック、マウスオーバー、ページの読み込み後にトリガーされる読み込みイベントなど、ユー...

JS は複数のタブを切り替えるカルーセルを実装します

カルーセルアニメーションは、ページの外観とインタラクティブなパフォーマンスを向上させることができます...

Tik Tok サブスクリプション ボタンのアニメーション効果を実現する CSS

少し前にTik Tokを見ていて、フォローするときのボタンアニメーションがとても美しいと思ったのと、...

スプレッド演算子のサンプルコードと JavaScript での応用

スプレッド演算子を使用すると、式をある時点で展開できます。スプレッド演算子は、複数のパラメーター (...

nginxのリソースキャッシュ設定の詳細な説明

私はずっとキャッシュについて学びたいと思っていました。結局のところ、キャッシュはフロントエンドのパフ...

HTML の表の行と列を結合する問題の解決策の詳細な説明

私たちが構築しようとしていたウェブサイトには、長い文章だけでなく、多数の表も含まれており、表のレイア...

Promise カプセル化 wx.request メソッド

前回の記事では、Promise を使用して小さなプログラム wx.request をカプセル化する実...