一般的な 3 行 2 列の高さ調整型レイアウト_CSS/HTML-CSSチュートリアル-php.cn

一般的な 3 行 2 列の高さ調整型レイアウト_CSS/HTML

WBOY

リリース： 2016-05-16 12:12:12

オリジナル

1600 人が閲覧しました

ページのコンテンツ全体を中央に配置する方法と、コンテンツに合わせて高さを自動的に調整する方法。これは、CSS レイアウトを学習するときに最もよくある問題です。以下に実際の例を挙げて詳しく説明します。（この記事の経験と経験は、Blue Idealフォーラムでのxpointとguoshuangの間の議論の結果です。）

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

完全なコード

header< /div>

class="テキスト">right

1< /p>

left

コード分析

まず、本文と先頭の #header の最初の行を定義します。ここで重要なのは、本文の

text-align:center; と margin-right: auto;margin です。 - 左: auto;、これら 2 つの文はヘッダーを中央に配置します。注: 実際、IE では text-align:center; を定義することでセンタリングが実現されていますが、mozilla ではセンタリングを実現するには margin:auto; を設定する必要があります。

次に、中央の 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 でレイアウトが変形します。通常、内部に別のレイヤーを挿入することで問題を解決します。