聖杯レイアウトと両翼レイアウト

聖杯レイアウトと二重飛行翼レイアウトは主に次の問題を解決するために使用されます:

1. 3 列レイアウト、両側は固定幅、中央は適応。 2. 中央の列が最初にブラウザにロードされ、レンダリングされます。

解決策:

最初に中央の div を前に、次に左に、次に右に書き込みます。これにより 2 番目の問題が解決され、中央の div が最初にレンダリングされます。

しかし、これには問題があり、前に書かれたものは前にも表示されてしまいます。

この問題を解決するには、3 つの列をすべてフロートにします。次に、中央の列の幅を 100% に設定します。

この時、中央の列が1行目、左右の列が2行目になります。このとき、左の列を中心より左に、右の列を中心より右に移動するだけです。左右に 150px などの固定幅を追加します。

次に、左の列に負のマージンを追加します。 margin-left: -100%; 右の列に負のマージンを追加します。 margin-left: -150px;

この時点で、3 列のレイアウトが形成されていることがわかります。しかし、問題は、中間 div のコンテンツがブロックされていることです。この問題を解決するために、聖杯レイアウトとダブルウイングレイアウトでは異なる考え方が生まれました。

聖杯レイアウトでは、まず 3 列の div の外側に div を配置します。セマンティック タグの記事を使用できます。記事の左右のpadding-leftとpadding-rightを設定した後、左右のdivに相対レイアウト位置:relativeを使用します。この時点で、3 つの列すべてが中央に向かってインデントされていることがわかります。次に、目標を達成するために、左右の負の値をそれぞれ左列と右列に追加します。

コードは次のとおりです:

リーリー

リーリー

ダブルウィングレイアウトは、コンテンツを配置するために中央の div 内にサブ div を作成し、margin-left と margin-right を使用して左と右の列 div 用のスペースを残します。

コードは次のとおりです:

リーリー

リーリー

次に、3 つの列の高さを同じにしたい場合は、3 つの列にそれぞれ属性 padding-bottom: 9999px; margin-bottom: -9999px; を追加して、3 つの列を無限の長さに伸ばすことができます。 overflow: hidden 属性を 3 つの列の外側の記事タグに追加するだけです。

エンディング。