CSS 聖杯レイアウトとは何ですか?

CSS における聖杯レイアウトとは、両側のボックスの幅が固定で中央のボックスがアダプティブである 3 列のレイアウトを指し、このうち中央の列が前に配置されます。ドキュメント フローが最初にレンダリングされるようにします。3 つの列すべてで "float:left" "Float が使用され、left プロパティと right プロパティが一致します。

フロントエンドの 2 つの古典的なレイアウト、ホーリー グレイル レイアウトとダブル フライング ウィング レイアウトについては誰もがよく知っているはずです。 HTML 構造を理解しているだけでなく、DIV CSS レイアウトの習熟度を示すこともできます。

実は、聖杯レイアウトはダブルウィングレイアウトと同じものです。これらはすべて 3 列レイアウトを実装しており、両側のボックスの幅が固定され、中央のボックスがそれに適応します。これは、私たちがよくソリッド レイアウトと呼ぶものです。それらが達成する効果は同じですが、違いは実装のアイデアにあります。

ページをズームすると、ページの幅が変化しても、3 列レイアウトは中央のボックスが最初に表示され、両側のボックスは固定されていることがわかります。小さくなっても、ブラウズには影響しません。 注: ページをズームするとき、幅は 700PX 未満にすることはできません。安全上の理由から、本文に最小幅を追加することが最善です!
このように少し理解できたら、聖杯レイアウトの実装:

注: コードのリセット部分は自分で追加できます

1. HTML 構造:

<header>
    <h4 id="Header内容区">Header内容区</h4>
</header>
<div class="container">
    <div class="middle">
        <h4 id="中间弹性区">中间弹性区</h4>
    </div>
    <div class="left">
        <h4 id="左边栏">左边栏</h4>
    </div>
    <div class="right">
        <h4 id="右边栏">右边栏</h4>
    </div>
</div>
<footer>
    <h4 id="Footer内容区">Footer内容区</h4>
</footer>

なぜ真ん中の主要な部分が前に書くのか疑問に思うかもしれません。中央のボックスを最初にレンダリングし、その適応値、つまり幅 100% を設定する必要があるためです。

2. css スタイル:

header{
    width: 100%;    height: 40px;
    background-color: #8ecfd4;
}
.container{
    overflow:hidden;
}
.middle{
    width: 100%;
    background-color: #f7f537;
    float:left;
}
.left{ 
    width: 200px;
    background-color: #37f7c8;
    float:left;
}
.right{
    width: 200px;
    background-color: #eb6100;
    float:left;
}
footer{
    width: 100%; 
    height: 30px;
    background-color: #8ecfd4;
}

このときのレンダリング:

このとき、真ん中の 3 つの列は一行ではない理由も非常に明確であることがわかります。 3 つの列はすべてフローティングですが、中央の列の幅が 100% に設定されているため、左右の列は改行表示をサポートできません。

ここで行う必要があるのは、左の列を左に、右の列を右に移動することです。次にCSSのマイナスマージンが必要になります。

3. 負のマージン レイアウトを使用します

左側のボックスを上にします

.left{
    margin-left:-100%;
}

右側のボックスを上にします

.right {
    margin-left:-200px;
}

これがレンダリングです

ソリッドレイアウトの実装

希望通りのレイアウトができたように見えますが、内容を埋めていくと、真ん中では、まだ問題が見つかります。このステップでは、視覚効果を容易にするために、中央の主要部分にも高さを与えます。

.middle{
    width: 100%;
    height: 200px; 
    background-color: #f7f537;
    float:left;
}
.left{    
    width: 200px;
    height: 200px;
    background-color: #37f7c8;
    float:left;
}
.right{
    width: 200px;
    height: 200px;
    background-color: #eb6100;
    float:left;
}

上記のレンダリングからわかるように、中央の列のコンテンツは両側の部分によって隠されています。これは私たちが望んでいることではないため、私たちの作業はまだ続けなければなりません。

4. 中央のアダプティブ ボックスを安全に表示します (親要素を使用して左右のマージンの値を設定し、親の 3 つのサブボックスを中央に押し込みます)。

.container{ 
    padding: 0 200px;
}

ここで 200px は、左右のボックスの幅です。

結果は次のとおりです:

親のパディングを使用してボックスを中央に押し込みます

左側がそして右 パディングはありますが、中央のボックスのコンテンツはまだ抑制されています。

5. 左側と右側を分離します (左右のボックスに位置を追加します。位置を追加した後、左右のボックスに左右の値を設定できます)。

.left{ 
    position: relative; 
    left: -200px;
}
.right{
    position: relative;
    right: -200px;
}

最終的なレンダリングをご覧ください

これで、聖杯のレイアウトは OK になりました。望む効果が得られます。左右のボックスは固定され、中央のボックスは適応的で、中央のボックスの内容はまったく影響を受けません。みんなが助けてくれることを願っています。

プログラミング関連の知識について詳しくは、

プログラミング学習をご覧ください。 ！

以上がCSS 聖杯レイアウトとは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。