序文
ページを閲覧すると、左、中央、右に3列のCSSレイアウトがよくあります。これは、CSSの古典的なホーリーグレイルレイアウトとダブルウィングレイアウトです。左側と右側は固定されており、中央は適応型です。 。効果は以下のとおりです。次に、ホーリーグレイルレイアウトとダブルウィングレイアウトの類似点と相違点について説明します。
聖杯レイアウトコード分析
まず、聖杯レイアウトの実装を紹介します。
- 最初のステップは、最も外側のコンテナラップの左右をに設定する
paddingことです200px - 2番目のステップでは、 3つのコンテナ
content、、、、letfおよびをレンダリングします。追加するrightには、効果を確認しやすいように、彼にコンテナを満たしてもらいます。また、幅と高さの両方をに設定します。次に、3つのボックスすべてをフロートに設定します。つまり、下のボックスをすべて設定します。次に、効果を見てみましょう。contentwidthL:100%background: green;height:200px;leftright200pxwrapdivfloat:left
この時点で、必要なレンダリング効果を実現するには、下の2つのコンテナを上の2つの空白の領域に移動するだけです。次に、相対位置属性を左右に追加し
left、rightコンテナを追加してそれらを上に移動する必要があります。
- ステップ1：最初にコンテナーを移動し、コンテナーに、 を追加
leftします。最初にコンテナを最初の行に戻し、次にコンテナに対して100％左に移動し（つまり、独自の幅）、次にコンテナに対して200ピクセル右に移動します。leftposition: relative;left: -200px;margin-left: -100%;leftcontentcontentleft - ステップ2：コンテナを移動
rightし、コンテナに、をright追加しmargin-left: -200px;、同様に右の位置を左に200px追加して移動します。これらの2つの手順を実行すると、レンダリングと同じ効果を得ることができます。これはいわゆる聖杯のレイアウトです。position: relative;left: 200px;rihgtposition: relative;left: 200px;
HTMLコード
<body>
<div class="wrap">
<div class="content">
content
</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
CSSコード
*{
margin: 0px;
padding: 0px;
}
.content{
width: 100%;
background: green;
height: 200px;
}
.left, .right{
height: 200px;
width: 200px;
background: pink;
}
.wrap div{
float: left;
}
.wrap{
padding: 0 200px;
height: 2000px;
}
.left{
margin-left: -100%;
position: relative;
left: -200px;
}
.right{
margin-left: -200px;
position: relative;
left: 200px;
}
全翼機レイアウトのコード分析
次に、全翼機のダブルレイアウトの実現をご紹介します。
-
最初のステップは聖杯のレイアウトと同じです。
contentコンテナ、leftコンテナ、rightコンテナfloat:leftを左にフロートするように設定し、合計leftの高さと幅をに設定し、幅をに設定し、高さをに設定します。効果を確認する方が便利です。right200pxcontent100%200px -
2番目のステップは、左端をカバーするよう
leftに設定されていますmargin-left:-100%content -
次に、右側が覆われるよう
rightに3番目のステップを設定します。効果を見てみましょう。margin-left：-200pxcontent
左右
leftのrightコンテナは指定の位置に到達していますがcontent、コンテナの中身も両側のコンテナで覆われていることがわかります。目的の効果が得られない
- 最後のステップでは
content、コンテナに別のコンテナレイヤーを配置innerして、メインコンテンツがinner読み込まれるようにします。したがって、レンダリングと同じ効果を実現するには、左右を設定innerする必要があります。これは、全翼機のレイアウトです。 。margin200px
HTMLコード
<body>
<div class="wrap">
<div class="content">
<div class="ineer">content</div>
</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
CSSコード
<style>
*{
margin: 0;padding: 0;
}
.left, .right{
width: 200px;
height: 200px;
background: pink;
float: left;
}
.content{
height: 200px;
background: rgb(45, 173, 75);
float: left;
width: 100%;
}
.ineer{
margin: 0 200px;
height: 200px;
}
.left{
margin-left: -100%;
}
.right{
margin-left: -200px;
}
</style>
類似点と相違点
以下に、2つのレイアウトの類似点と相違点について説明します。
- 同じ：両方のレイアウトでボックスが右にフロートするように設定され、HTMLでボックスをロードする順序は、中央のコンテナの幅が100％であるため、ページ幅に応じて変更できるため、中央左右になります。次に、左マージンを使用して、左右のコンテナを中央のコンテナにオーバーレイします。
- 異なる：3つのコンテナが同じ列に引っ張られる場合、聖杯のレイアウトは、左右のコンテナの位置を調整し、相対的な位置で左右のコンテナを中央のコンテナから移動し、同時に最も外側のコンテナは、中央のコンテナを覆わないようにするための内側のマージンです。全翼機のレイアウトは、内側のコンテナを中央のコンテナでラップし、コンテンツを中央のコンテナではなく内側のコンテナに表示することです。コンテンツが左右のコンテナによってブロックされないように、内側のレイヤーにパディングを付けます。
まとめ
ホーリーグレイルレイアウトとダブルウィングレイアウトの効果は同じですが、左右のコンテナを真ん中のコンテナで覆うと、扱うコンテナが異なります。左右のコンテナを扱う場合、Holy Grailレイアウトでは、相対位置を使用するときに左右の平行移動の反対方向に注意する必要があります。ダブルウィングレイアウトで中央のコンテナを扱うときは、内側のコンテナのパディングに注意してください。