3 列レイアウト (いわゆる聖杯と双翼)_html/css_WEB-ITnose

× 目次 [1]float [2]absolute [3]flex [4] まとめ

前の言葉

聖杯レイアウトとダブルウイングレイアウトについてよく聞きますが、とても高度な用語だと思います。しかし実際には、これらは 3 列レイアウトの 2 つのレイアウト方法にすぎません。この記事では、3列レイアウトの3つのアイデアを紹介します

アイデア1: float

【1】聖杯レイアウト

聖杯レイアウトは、float、negative margin、relativeを使用し、追加のタグを追加する必要はありません。 .main 要素は、両側に固定幅要素用のスペースを残すようにパディングを設定します。コンテンツ要素は幅 100% に設定され、中央の位置を占めます。両側の固定幅要素は、負のマージンと相対のオフセット属性を設定することによって、対応する位置に到達します。 欠点: 相対的な配置が使用されないため、スケーラビリティが低くなります。

【2】Double Flying Wing のレイアウト

Double Flying Wing のレイアウトは、Holy Grail のレイアウトをベースにしており、相対配置を使用せずに .main 要素の外側に div 構造のレイヤーを追加します。 .main要素にマージンを設定します。両側の固定幅の列は、負のマージンを通じて .main 要素のマージン領域を占有します

デメリット: 等高レイアウトが実装されず、HTML 構造が追加されます

<style>body,p{margin: 0;}.top,.bottom{    height: 30px;}.middle{    padding: 0 120px;    overflow: hidden;}.main{    width: 100%;    float: left;}.left,.right{    float: left;    width: 100px;        position: relative;}.left{    margin-left: -100%;    left: -120px;}.right{    margin-left: -100px;    right: -120px;}</style>

<div class="parent" id="parent" style="background-color: lightgrey;">    <div class="top" style="background-color: lightblue;">        <p>top</p>    </div>      <div class="middle" style="background-color: pink;">        <div class="main" style="background-color: lightcoral;">            <p>main</p>            <p>main</p>        </div>        <div class="left" style="background-color: orange;">            <p>left</p>        </div>        <div class="right" style="background-color: lightsalmon;">               <p>right</p>        </div>    </div>              <div class="bottom" style="background-color: lightgreen;">        <p>bottom</p>    </div>        </div>

【3】 】float + box-sizing + background-clip

.main要素の境界領域は、パディングと背景を擬似的に同じ高さの効果を実現するために両側の固定幅の列が配置される領域です。要素の間隔を確保するには、.main の -clip を使用します。両側の要素は、負のマージンを介して .main 要素の境界領域に調整されます

欠点: 互換性が低い

<style>body,p{margin: 0;}.top,.bottom{height: 30px;}.middle{overflow: hidden;}.mainWrap{    width: 100%;    float: left;}.main{margin: 0 120px;}.left,.right{    float: left;    width: 100px;    }.left{margin-left: -100%;}.right{margin-left: -100px;}</style>

<div class="parent" id="parent" style="background-color: lightgrey;">    <div class="top" style="background-color: lightblue;">        <p>top</p>    </div>      <div class="middle" style="background-color: pink;">        <div class="mainWrap">            <div class="main" style="background-color: lightcoral;">                <p>main</p>                <p>main</p>            </div>                    </div>        <div class="left" style="background-color: orange;">            <p>left</p>        </div>        <div class="right" style="background-color: lightsalmon;">               <p>right</p>        </div>    </div>              <div class="bottom" style="background-color: lightgreen;">        <p>bottom</p>    </div>        </div>

アイデア 2: 絶対

先頭を 0 に設定する子要素の高さ;bottom: 0; すべての子要素の高さを親要素の高さと同じにし、同じ高さの効果を実現します

欠点: .middle 要素の高さを設定する必要があり、スケーラビリティが低い

<style>body,p{margin: 0;}.top,.bottom{height: 30px;}.middle{overflow: hidden;}.main{    float: left;    width: 100%;    border-left: 100px solid lightgrey;    border-right: 100px solid lightgrey;    padding: 0 20px;    background-clip: content-box;    box-sizing: border-box;}.left,.right{    float: left;    width: 100px;    }.left{margin-left: -100%;}.right{margin-left: -100px;}</style>

<div class="parent" id="parent" style="background-color: lightgrey;">    <div class="top" style="background-color: lightblue;">        <p>top</p>    </div>      <div class="middle" style="background-color: pink;">        <div class="main" style="background-color: lightcoral;">            <p>main</p>            <p>main</p>        </div>                    <div class="left" >            <p>left</p>        </div>        <div class="right" >               <p>right</p>        </div>    </div>              <div class="bottom" style="background-color: lightgreen;">        <p>bottom</p>    </div>        </div>

3 つのアイデア : flex

デフォルトでは、flex 内の flex 項目は親要素の高さまで引き伸ばされ、高さが一定の効果を実現できます。スケーラブルなプロジェクトの順序を変更することで、要素の順序切り替えの効果を得ることができます

デメリット: 互換性が低い

<style>body,p{margin: 0;}.top,.bottom{height: 30px;}.middle{    position: relative;    height: 40px;}.left,.right,.main{    position: absolute;    top: 0;    bottom: 0;}.left{width: 100px;}.right{    width: 100px;    right: 0;}.main{    left: 120px;    right: 120px;}</style>

<div class="parent" id="parent" style="background-color: lightgrey;">    <div class="top" style="background-color: lightblue;">        <p>top</p>    </div>      <div class="middle" style="background-color: pink;">        <div class="main" style="background-color: lightcoral;">            <p>main</p>            <p>main</p>        </div>                      <div class="left" style="background-color: lightseagreen;" >            <p>left</p>        </div>        <div class="right" style="background-color: lightcyan;" >               <p>right</p>        </div>    </div>              <div class="bottom" style="background-color: lightgreen;">        <p>bottom</p>    </div>        </div>

概要

主要なコンテンツ要素は、 html構造の最前面、CSSのスタイル変更で位置を中央に変更することが前提なのでアイデアはあまりありません。フロート フローの要素は負のマージンでシフトでき、絶対位置決めフローの要素はオフセット属性でシフトでき、フレックス ボックス モデルはオーダー属性でシフトできます。相対を使用することに加えて、通常のフロー内の要素はネガティブマージンを使用して変更できないため、この前提ではテーブルやインラインブロックなどのレイアウト方法はあまり実用的ではありません。