ホームページ > ウェブフロントエンド > htmlチュートリアル > 一般的な 3 行 2 列の中央高さ適応 div+css レイアウト_html/css_WEB-ITnose

一般的な 3 行 2 列の中央高さ適応 div+css レイアウト_html/css_WEB-ITnose

WBOY
リリース: 2016-06-24 12:28:16
オリジナル
1289 人が閲覧しました

如何使整个页面内容居中,如何使高度自适应内容自动伸缩,这是学习CSS布局最常见的问题。

 

下面给出一个实际的列子,附详细说明。

 

首先可以将下列代码复制到html文件中运行一下,在mozilla、opera和ie浏览其中,均可达到居中且自适应高度的要求。

 

      

             

             

                    

left

                    

             

      

まず、本文と上部領域 #header を定義します。ここで重要なのは、本文の text-align: center と、margin- です。 header. left: auto および margin-right: auto; 効果はブラウザーのヘッダー領域を中央に配置するのと似ています。注: IE では、本文を中央に配置するには text-align:center を定義するだけで済みますが、mozilla (firefox) では margin:auto が必要です。

次に左右のエリアです。これら 2 つの列を中央に配置するために、コンテナーがそれらの外側にネストされ、原理は上記と同じです。こうすることで左右も全体的に中央に集まります。

なぜコンテナと左右の間に mainbg のレイヤーがあるのか​​疑問に思われるかもしれませんが、このレイヤーの役割は何でしょうか。このレイヤーは背景を定義するために使用されます。そのため、背景をコンテナー内で直接定義するのではなく、複数のレイヤーで定義してはどうでしょうか?その理由は、mozilla (firefox) が問題を引き起こしているためです (作成した Web ページが Firefox と ie で異なって表示されることを望まないため) mozilla では、高さの値を 1 つ以上ネストする必要はありません。背景を表示することはできますが、高さを指定すると、適応的な高さの要件を達成できないため、この方法で定義された mainbg レイヤーの左の float: にトリックが追加されます。の場合、高さを指定せずに背景を表示することができます。

最後に定義するのは、下部のフッター レイヤーです。この層の重要な点は明らかです。この文の機能は、フッター層の浮動継承をキャンセルすることです。そうしないと、フッターがヘッダーの近くに表示されるか、Mozilla が何かおかしなことをしていることがわかります:)

ここで終わりだと言われていますが、注意深い友人なら、左右が 1 つのレイヤーにネストされていることがわかるでしょう各レイヤーは .text{margin:0px;padding:20px} を使用していますが、これはなぜですか?その理由は、Mozilla と IE ではボックス モデルの解釈が異なるためです。マージンとパディングを直接定義すると、Mozilla と IE の表示に不一致が発生します。したがって、IE と Mozilla の間で不一致が発生した場合は、追加のレイヤーを追加することで問題が解決されることがよくあります。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート