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

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

 

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

 

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

 

body

{

       background:#999;

       text-align:center;

       color:#333;

       font-family:Arial, Verdana, Sans-serif;

}

#header

{

       width:776px;

       margin-left:auto;

       margin-right:auto;

       padding:0px;

       background:#eee;

       height:60px;

       text-align:center;

}

#container

{

       margin-left:auto;

       margin-right:auto;

       width:776px;

}

#mainbg

{

       width:776px;

       padding: 0px;

       background:#60A179;

       float:left;

}

#right

{

       float:right;

       margin:2px 0px 2px 0px;

       padding:0px;

       width:574px;

       background:#ccd2de;

       text-align:left;

}

#left

{

       float:left;

       margin:2px 2px 0px 0px;

       padding:0px;

       background:#f2f3f7;

       width:200px;

       text-align:left;

}

#footer

{

       clear:both;

       width:776px;

       margin-right:auto;

       margin-left:auto;

       padding:0px;

       background:#eee;

       height:60px;

}

.text

{

       margin:0px;

       padding:20px;

}

header

      

             

                    

right

1

2

3

                    

             

             

                    

left

                    

             

      

       footer

まず、本文と上部領域 #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 の間で不一致が発生した場合は、追加のレイヤーを追加することで問題が解決されることがよくあります。