「聖杯のレイアウト」

入門

「聖杯のレイアウト」 -これは非常に古い話題ですが、すでに多くの関連オンラインの記事がありますが、基本的な知識とフロントエンドエントリーインタビューの一つとして、いくつかは、まだ古いの見直しの必要性を感じるが。特に、読んだことがある「yuanzm」ブログ「のアリとテンセント提供していますが、私が得た方法」の記事の後、私たちは他人のために感じるが、自分たちのニーズのいずれかの知識はその原則がさえているかを理解するために少なくとも試みで練習に時間がかかります歴史ではなく、盲目的に言及し、表面に浮かびます。私はこの記事への感謝の意を表したいと思います〜

聖杯の起源

至高の目標

レイアウトは、最初に作成した「3列の液体レイアウト」の実装や、誰がチェックが、2006年に記事を書いた「APART LIST」のマシュー・レヴィンからの最初の完全な実現されない可能性がありますを議論聖杯でありますそれは聖杯を達成するための最善の方法についてのウェブページに焦点を当てています。

いわゆる固液レイアウトは、相対レイアウト、レイアウトを適応液体レイアウト幅の値を、変更することができる血管の変化幅で、水のガラスの容器のように固体に固定されています。

この記事では、著者は以下のような問題のいくつかの実装の時に指摘：必須（DOM左、真ん中の最初の書かれたパフォーマンスと、最終的には、右される）ため、その他の情報源に基づいて、それはコードにつながる可能性は十分ではありません特にDOMのローディング順位から、可撓性、中間コンテンツが最初にロードすることができません。

そこで彼は、意志の計画を与えます：

中間缶流れ（流体）の両側に固定された幅を有します。
中央の列が最初に出現できます。
これは、上に任意の列を許可します。
一つだけの余分なdivタグ
互換性パッチの最小値をもたらすための唯一の非常にシンプルなCSS、

記事はまた、彼のアイデアがインスピレーションに基づいて述べたように、「一つの真のレイアウト」と「エリック・メイヤーの適応は、」2件の記事がもたらしました。

ここでは、最終結果の「聖杯のレイアウト」を参照してくださいすることができますhttp://alistapart.com/d/holygrail/example_1.html

実装

そして、あなたが仕事に取り掛かる、具体的な実装のアイデアは言いました：

まず、我々は表現を容易にするため、ここでは、以下の著者のHTMLコードをレイアウトする必要がある、タグが非セマンティックを使用してid、彼はプロジェクトにセマンティック他の公式を使用するように提案しましたid。例えば、我々は150ピクセルによって200pxの左、右の幅の幅、中間フローレイアウトが実装する必要があります。

<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>

彼は先に述べたように、ただの余分なレイヤを追加divそのidがありますcontainer。これは次のように非常に単純なCSSコンテンツ、特定のコードです：

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 */
}

それで見てみましょうは、ロジックのステップの実装によってステップ：

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

最初は、ヘッダ、フッタ三の容器DIVを書き込みます

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

<div id="container"></div>

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

それらの幅に左右の余白で我々の容器。それは次のようになります。

フレームを作成します。

ステップ2は、3つの列を追加しました

この時点で、我々は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>

その後、我々は適切な幅を伴って各列を与え、そしてそれらフロートを設定します。同時に、我々は上記と一緒にフロートから3つの列で、環境下のフッターをクリアする必要があります。

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

中央の列の幅の100％がパディング容器が設けられているため、その親コンテナの用語の幅に基づいて、したがってページの中央の中央の列に見えるが、行の左と右の二つの列以降であることに注意してください下に示すように、中央の列に戻って、十分なスペースので、次の中央の列にプッシュ：

列を追加

左の列のステップ3は我慢します

すでに場所で中央の列、すべてのことに変わりはないが、周りの2つの列を設置し、我々は最初の左の列を置くことです。

詳細な手順については、2つの小さなステップにそこに分割されます。まず第一に、私たちが最初にその余白の-100％に設定し、その関係、あなたが勝つことができる左の列、および中央の列との重複の浮きに起因する、つまり、左を占めました。左上の列と右側の列ので、前方自動的に左側の列の元の位置に浮きます。

私は場所に左の列を引き

その後、我々は特性（相対）の相対位置を使用し、が設けられており、左側の列オフセット幅：

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

あなたはそれを設定し、見ることができright、特性が左にオフセット200pxの右側のコンテナラインに相対的である。この方法を以下のように、それは完全にコンテナ内で、我々はそれが場所に滞在したいものである左位置、の余白に行きれます下記：

場所IIに左の列を引き

ステップ4右側の列を設置しました

最後に、我々は、単に容器の外側から右の位置に彼を置くために上記の原理を使用し、我々は再びに等しい、負の値のマージンを設定する必要があり、右側の列を設置する必要が右側の列幅：

#right {
  width: 150px;          /* RC width */
  margin-right: -150px;  /* RC width */
}

この時点で、すべての列は、所定の位置にある〜

所定の場所に右の列を引き

送信元アドレス

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

参考記事

「聖杯ので検索"マシューLevineの

：この記事はで再現された猿2048 「聖杯のレイアウト」に

入門