?「聖杯レイアウト」について_html/css_WEB-ITnose

はじめに

「聖杯レイアウト」?? これは非常に古いトピックであり、インターネット上に多くの関連記事がありますが、フロントエンドエントリーには必須です。これまでに学んだことの 1 つは、過去を振り返り、何か新しいことを学ぶ必要性を今でも感じているということです。特に「yuanzm」さんのブログの記事「私がアリババとテンセントから同時にオファーを獲得した方法」を読んだ後、他の人が知っている知識については、少なくとも自分で実践して理解するのに時間がかかる必要があると感じました。その原則や歴史が何であるかさえ、盲目的かつ表面的に引用すべきではありません。この記事に感謝の意を表したいと思います~

聖杯の起源

聖杯レイアウトは、「3つの要素」の実装についての議論です。これは、最初は知らない人によって作成されました。しかし、最も初期の完璧な実装は、2006 年に Matthew Levine が「A LIST APART」に書いた記事から来ました。主に、最高のホーリー レイアウトの実装方法について説明しています。ウェブページ上の聖杯。

いわゆる液体レイアウトは固体レイアウトに対して相対的なもので、液体は容器に入ったコップの水のようなものです。コンテナの幅が変化します。

この記事で、著者は当時のいくつかの実装方法の問題点を指摘しました: ソース順に書かなければならない (DOM では、Left が最初に書かれ、次に Middle が書かれ、最後に Right ) などを使用すると、コードが柔軟性に欠ける可能性があります。特に DOM の読み込みシーケンスに関しては、中間コンテンツを最初に読み込むことができません。

そこで彼は、次のような解決策を提案しました。

1. 中央に流れることができる両側の幅を固定します。 >

   中央の列を最初に表示できます。

2. 追加の div タグのみが必要です。

3. 最小限の互換性パッチを備えた非常にシンプルな CSS のみ

4. 記事では、彼のアイデアが「記事からインスピレーションを得たもの」に基づいているとも述べられています。 True Layout」と「Eric Meyer の翻案」。
5. ここで「聖杯レイアウト」の最終的な効果を確認できます: http://alistapart.com/d/holygrail/example_1.html
   実装方法

接続本題に入り、具体的な実装アイデアについて話しましょう:

まず、レイアウトに必要な HTML コードは次のとおりです。表現の便宜上、作成者はタグに非セマンティック ID を使用します。彼は、他の正式なプロジェクトではセマンティック ID を使用することを推奨しています。たとえば、左側の幅を 200 ピクセル、右側の幅を 150 ピクセル、中央に流れるようなレイアウトを実現する必要があります。

彼が前に述べたように、ID がcontainer である div の追加レイヤーを追加するだけです。 CSS コンテンツは非常にシンプルで、具体的なコードは次のとおりです:

その実装ロジックを段階的に観察してみましょう:

フレームワークを確立するステップ 1

<div id="header">#header</div><div id="container">  <div id="center" class="column">#center</div>  <div id="left" class="column">#left</div>  <div id="right" class="column">#right</div></div><div id="footer">#footer</div>

最初に書いてください ヘッダー、フッター、コンテナーの 3 つの div に対して

body {  min-width: 550px;      /* 2x LC width + RC width */}#container {  padding-left: 200px;   /* LC width */  padding-right: 150px;  /* RC width */}#container .column {  height: 200px;  position: relative;  float: left;}#center {  background-color: #e9e9e9;  width: 100%;}#left {  background-color: red;  width: 200px;          /* LC width */  right: 200px;          /* LC width */  margin-left: -100%;}#right {  background-color: blue;  width: 150px;          /* RC width */  margin-right: -150px;  /* RC width */}#footer {  clear: both;}#header, #footer {  background-color: #c9c9c9;}/*** IE6 Fix ***/* html #left {  left: 150px;           /* RC width */}

コンテナーのパディングを左側と右側のそれぞれの幅に設定します。

ステップ 2 3 つの列を追加する

<div id="header">#header</div><div id="container"></div><div id="footer">#footer</div>

この時点で、3 つの列を組み込むことができる基本的なフレームワークが完成しました。

次に、各列に適切な幅を与え、フローティングに設定します。同時に、フッターのコンテキストをクリアして、上の 3 つの列と一緒にフロートしないようにする必要があります。

ここでの中央の列の 100% の幅は、親コンテナであるコンテナの幅に基づいていることに注意してください。コンテナにはパディングが設定されているため、中央の列は Web 上にあるように見えます。ページの中央にありますが、次の図に示すように、左右の列が中央の列の後ろに配置され、スペース不足により中央の列の下に押し込まれています。ステップ 3: 左の列を移動します 上に置きます

中央の列は既に配置されています。あとは左右の列を上に置くだけです。 次に、左の列を置きます。

<div id="header">#header</div><div id="container">  <div id="center" class="column">#center</div>  <div id="left" class="column">#left</div>  <div id="right" class="column">#right</div></div><div id="footer">#footer</div>

プロセスを詳しく説明すると、2 つの小さなステップに分かれます。まず、マージンを -100% に設定します。これにより、フローティング関係により、左の列が盛り上がって中央の列と重なり、左側を占めることができます。左列の上部位置により、右列は自動的に左列の元の位置まで前方に浮き上がります。

#container .column {  float: left;}#center {  width: 100%;}#left {  width: 200px;  /* LC width */}#right {  width: 150px;  /* RC width */}#footer {  clear: both;}

次に、相対位置属性 (relative) を使用して、

の左列の幅に等しいオフセットを設定する必要があります。

ご覧のとおり、設定される right 属性はコンテナの右の線に対して 200 ピクセル左にオフセットされており、コンテナの左内側のマージンの位置に完全に到達します。下の図に示すように配置します:

ステップ 4: 右側の列を上に配置します

最後に、右の列を上に配置する必要があります。このとき、上記の原則は、 の右列の幅に等しい負のマージン値を再度設定する必要があります。 :

#container .columns {  float: left;  position: relative;}#left {  width: 200px;        /* LC width */  margin-left: -100%;    right: 200px;        /* LC width */}

この時点で、すべての列が所定の位置にあります~

ソースコードアドレス

https://jsfiddle.net/DotHide/pg47fucg/1/