Holy GrailとShuangfeiyiはどちらも、中央に適応コンテンツ幅、両側に固定コンテンツ幅を備えた3列のレイアウトを実現することを目指しています。
たくさんの情報を検索したところ、この2つのモデルの高さの問題について言及している情報はほとんどないことがわかりました。インターネットで提供されているコードでさえ、高度な自己適応はほとんどありません。おそらく、単純すぎると誰もが思っているでしょう。言及しますが、私は長い間苦労していたので、以下では、高度な適応を実現する方法についても説明します。
2つの違いを3つのポイントで要約します。
1. DOM構造が異なります。聖杯と比較して、Shuangfeiyiは中央のコンテンツ用に個別のコンテナーを追加して、マージンが左右に空白を残すことができるようにします。
2.聖杯はパディングを使用して左右の空白を残し、二重翼はマージンを使用します。
3.聖杯は、フローティングとポジショニングを組み合わせて左右のポジショニングを行う必要があり、ダブルウィングはフロートするだけで済みます。
以下は、聖杯と二重全翼機の実現についての個別の説明です。
聖杯モデル：
聖杯の最初の記事の詳細は次のとおりです。クリックしてリンクを開きます。この記事では、聖杯レイアウトの実装手順と各手順の役割を詳しく紹介します。
DOM構造：
<div class="head">head<br /></div>
<div class="main">
<div class="middle">middle</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
<div class="footer">footer</div>
CSS：
<style>
* {
margin: 0;
padding: 0;
}
body {
min-width: 600px;
}
.head,
.footer {
width: 100%;
height: 50px;
text-align: center;
line-height: 50px;
background-color: #A9A9A9;
}
.left,
.middle,
.right {
float: left;
position: relative;
min-height: 200px;
margin-bottom: -2000px;
padding-bottom: 2000px;
}
.main {
padding: 0 200px;
overflow: hidden;
/*目的:使父div具有高度*/
}
.middle {
width: 100%;
background-color: red;
}
.right {
width: 200px;
background-color: blue;
margin-right: -200px;
}
.left {
width: 200px;
background-color: green;
margin-left: -100%;
left: -200px;
}
.footer {
clear: both;
}
</style>
主要部分はメインディスカッション部分です。3つの部分を並べて表示するにはどうすればよいですか？最初に考えたのはフロートを使用することでしたが、幅を適切に分散させる方法に問題がありましたか？同じ効果を得るためにパーセンテージと固定幅を使用してみましたが、ブラウザをある程度ズームアウトすると、コンテンツが次の行に移動します。
したがって、聖杯モデルはこの問題をうまく解決します。中央のコンテンツを最初にレンダリングし、1行だけを占有し、配置によって両側の左右のモジュールを固定します。
1.中央のコンテンツの幅を100％に設定し、左右の内側の余白を左右のモジュールに必要な幅に設定します（これを行うと、左右のスクロールバーが表示され、場合によっては表示されません。解決策はありません。後で理由を理解するためだけです。）;
2.左右のコンテンツの幅を設定し、左右の3つのモジュールを設定します。このときのページ効果は次のとおりです。
3.このステップは最も重要なステップです。3つのモジュールを相対位置として設定し、左マージンを左に100％、右マージンを左に設定すると、それ自体の幅の負の値になります。左右のモジュールが上に移動します。前の行に移動して、次の効果を実現します。
4.左から左に移動します。
詳細：
1.各モジュールの最小の高さと幅を設定して、モデル全体をより標準化し、理解と操作を容易にします。いくつかの単純な問題が発生します。
2. 3つのモジュールの親モジュールのオーバーフロー属性をhiddenに設定して、親divの高さが同じになるようにします。これには、次の目的があります。
3.適応高さの問題：
最後に、両側の高さを中央の高さに適合させることができない場合、次の状況が発生します。
中央のコンテンツは2つの側面よりも高くなっていますが、3つのモジュールが独立しているため、左側と右側はコンテンツに応じて高さを変更するだけです。したがって、この問題を解決する方法は実際には非常に簡単です。上記のリンク先の記事では、高さが等しい問題が実際に言及されています。高さが等しいという記事を参照できます。この記事を通じて、この種の解決に使用できることがわかります。問題の：
（1）親モジュールのオーバーフロー属性をhiddenに設定します。
（2）、margin-bottom：-bigValue;
padding-bottom：bigValue; bigValue値は十分に大きく、最も高い要素に近いか、さらに大きくする必要があります。
これにより、適応性の高い問題が解決されます。
これで聖杯モデルは終わりです。
ダブルフライングウィングモデル：
淘宝網UEDによって提案された、インターネットで人気のあるリファレンスバージョンは次のとおりです。ダブルフライングウィングモデル
ダブルフライングウィングモデルは、聖杯モデルに基づいてミドルコンテンツ用のコンテナを追加し、マージンを使用して左右の空白を残します。同じ効果は、配置しなくても実現できます。
DOM構造：
<div class="head">head</div>
<div class="container">
<div class="main">
<div class="center">middle</div>
</div>
<div class="left">Left</div>
<div class="right">Right</div>
</div>
<div class="footer">footer</div>
CSS：
<style>
* {
margin: 0;
padding: 0;
}
.head,
.footer {
width: 100%;
height: 50px;
text-align: center;
line-break: 50px;
background-color: #C0C0C0;
}
/*container只是为了让DOM结构看着更加合理*/
.container {
overflow: hidden;
}
.main {
width: 100%;
}
.center {
margin-left: 200px;
margin-right: 200px;
background-color: #F5704F;
}
.left,
.right,
.main {
float: left;
min-height: 130px;
margin-bottom: -2000px;
padding-bottom: 2000px;
}
.left {
width: 200px;
background-color: darkgoldenrod;
margin-left: -100%;
}
.right {
width: 200px;
background-color: cadetblue;
margin-left: -200px;
}
.footer {
clear: both;
}
</style>
聖杯と比較すると、Shuangfeiyiのコードははるかに単純であり、いくつかの原則は類似しているため、1つずつ繰り返すことはしません。効果は次のとおりです。
知乎の記事も悪くない：クリックしてリンクを開く
最後に、誰かがそれを見るかどうかはわかりません。上記は私の研究の要約であり、参照するには十分ではありません。EqualHeightの実装原理など、まだ理解できない問題がたくさんあります。ポジショニングの特定の実装原則、ブラウザの質問などの水平スクロール、私自身のレベルでは十分ではありません。この記事を読んでいただければ、私の疑問を解決したり、私の要約を洞察したり修正したりできます。 、それなら私は光栄に思います。
---------------------
https：//blog.csdn.net/PethZhang/article/details/78319151から