CSS での聖杯レイアウトとダブルフライング ウイング レイアウトの紹介 (コード付き)

この記事はCSSでの聖杯レイアウトと二重飛行翼レイアウトを紹介しています。必要な方は参考にしていただければ幸いです。

聖杯レイアウト

<div>#header</div>

  <div>
    <div>#center</div>
    <div>#left</div>
    <div>#right</div>
  </div>

  <div>#footer</div>

達成される効果は主にコンテナ内であり、左と右の幅は固定されており、中央が最初にレンダリングされ、幅は適応的です。

    body {
      min-width: 500px;
    }
    #container {
      overflow: auto;        /* BFC */
      padding-left: 180px;
      padding-right: 150px;
    }
    #container .column {
      height: 200px;
      position: relative;
      float: left;
    }
    #center {
      background-color: #e9e9e9;
      width: 100%;
    }
    #left {
      background-color: red;
      width: 180px;
      right: 180px; 
      margin-left: -100%
    }
    #right {
      background-color: blue;
      width: 150px; 
      margin-right: -150px;
    }

    #header, 
    #footer {
      background-color: #c9c9c9;
    }

このソリューションで注意すべき点がいくつかあります:

1. 中央の要素は左右の前に配置されているため、中央が最初にレンダリングされ、ユーザーはページのメイン コンテンツを最初に見ることができます。

2. コンテナ (幅:100%) は、コンテンツの 3 列をラップし、padding-left と padding-right によって左右の列用のスペースを作成します。

3. center、left、rightはすべて左float(float:left)を設定しているため、コンテナ内にはfloat flowが存在します。

4. 左の要素に margin-left: -100% を設定すると、左はコンテナの左上隅に移動し、position: right: 180px を渡します。 、コンテナの左パディング位置に移動します。 margin-left: -100%，使得left移动到container的左上角，在通过position：relative； right: 180px，移动到container的padding-left的位置上去。

5. 给right 元素设置 margin-right: -150px，使得它移动到container的padding-right的位置上去。

ps: margin-left 和 margin-right 利用了浮动流的特性，使得第一行能够同时容纳center，left，right这三个元素。

圣杯布局（flexbox实现）

  <div>#header</div>

  <div>
    <div>#center</div>
    <div>#left</div>
    <div>#right</div>
  </div>

  <div>#footer</div>
    body {
      min-width: 550px;  
    }
    #HolyGrail {
      display: flex;
      min-height: 100vh;
      flex-direction: column;
    }
    #container {
      display: flex;
      flex: 1;
    }
    #center {
      background-color: #e9e9e9;
      flex: 1;
    }
    #left {
      background-color: red;
      order: -1;
      width: 150px;
    }
    #right {
      background-color: blue;
      width: 150px;
    }
    #header, 
    #footer {
      height: 50px;
      background-color: #c9c9c9;
    }
如果不考虑ie10及以下的浏览器，那么可以使用flex来实现圣杯布局。而且圣杯布局可以通过让container填充高度来使得footer达到一个sticky的效果。
flex兼容性
双飞翼布局

圣杯布局和双飞翼布局解决的问题是一样的，就是两边定宽，中间自适应的三栏布局，中间栏要在放在文档流前面以优先渲染。圣杯布局和双飞翼布局解决问题的方案在前一半是相同的，也就是三栏全部float浮动，但左右两栏加上负margin让其跟中间栏p并排，以形成三栏布局。不同的地方在于解决中间p内容不被遮挡的思路上面

圣杯布局的为了中间内容不被修改，是通过包裹元素的padding-left和padding-right来使得内容p置于中间，然后再通过相对定位position:relative，配合right或left属性让左右两栏不则当中间内容。
双飞翼布局的解决方案是：通过再中间元素的内部新增一个p用于放置内容，然后通过左右外边距margin-left和margin-right
右側の要素に margin-right: -150px を設定して、コンテナのpadding-rightの位置に移動するようにします。 


ps: margin-left と margin-right はフローティング フローの特性を利用しているため、最初の行は中央、左、右の 3 つの要素を同時に収容できます。 
聖杯レイアウト (フレックスボックス実装)


<div>#header</div>

  <div>
    <div>
      <div>#center</div>
    </div>
    <div>#left</div>
    <div>#right</div>
  </div>

  <div>#footer</div>
    body {
      min-width: 500px;  
    }
    #container {
      overflow: auto;        /* BFC */
    }
    #container .column {
      height: 200px;
      float: left;
    }
    #center {
      background-color: #e9e9e9;
      width: 100%;
    }
    #center-content {
      margin-left: 180px;
      margin-right: 150px;
    } 
    #left {
      width: 180px;
      background-color: red;
      margin-left: -100%;
    }
    #right {
      background-color: blue;
      width: 150px;  
      margin-left: -150px; 
    }

    #header, 
    #footer {
      background-color: #c9c9c9;
    }
 ブラウザー IE10 以下を考慮しない場合は、flex を使用して Holy Grail レイアウトを実装できます。また、Holy Grail レイアウトでは、コンテナーが高さいっぱいになるようにすることで、フッターに粘着効果を与えることができます。 
フレックス互換性
ダブルフライングウィングレイアウト
🎜🎜🎜🎜聖杯レイアウトと二重飛行翼レイアウトによって解決される問題は同じであり、両側に固定幅と適応型中央を備えた 3 列レイアウトです。中央の列はドキュメント フローに配置する必要があります。前面が最初にレンダリングされます。聖杯レイアウトとダブルウィングレイアウトの問題の解決策は前半は同じです。つまり、3 つの列はすべてフロートですが、左右の列にマイナスのマージンを追加して並べて表示します。中央の列 p を使用して 3 列のレイアウトを形成します。 🎜違いは、🎜中央の p コンテンツがブロックされないように解決するという考え方にあります 🎜🎜🎜🎜Holy Grail レイアウトは、要素をラップするために padding-left と padding を使用します。中央のコンテンツが変更されないようにするには、 -right を使用してコンテンツ p を中央に配置し、相対位置指定 position:relative を使用して、 right または left 属性を使用します。左側と右側の列を中央のコンテンツにしないでください。 🎜🎜🎜🎜ダブルウィングレイアウトの解決策は、中央の要素内に p を追加してコンテンツを配置し、左右のマージン margin-left と margin-right を使用することです。  左右の列のためのスペースを残しておきます。 🎜🎜🎜🎜二重飛行翼レイアウトには p タグが 1 つ増え、使用する CSS 属性が 4 つ減りました。左と右の p は相対的なレイアウト位置を使用するため、padding-left と padding-right の使用が少なくなり、margin-left と margin-right の使用が多くなります。 🎜🎜🎜rrreeerrreee🎜 おすすめ関連記事: 🎜🎜🎜CSSでフローティング要素の行折り返しを実装する方法🎜🎜🎜🎜 CSSでのグリッドレイアウトの使い方まとめ(コード付き)🎜🎜

以上がCSS での聖杯レイアウトとダブルフライング ウイング レイアウトの紹介 (コード付き)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。