ホームページ > 記事 > ウェブフロントエンド > [CSS] ダブル飛翼レイアウトと聖杯レイアウト_html/css_WEB-ITnose
[CSS] ダブル飛翼レイアウトと聖杯レイアウト_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-21 08:47:161435ブラウズ
はじめに
レイアウトに CSS を使用する場合、通常、div レイアウトや float パディング マージン位置などの CSS プロパティを使用して、さまざまなレイアウト プランを取得できます。この記事では、3 列レイアウト スキームにおけるダブル ウイング レイアウトとホーリー グレイル レイアウトを紹介します。これらは同じ問題を解決します。つまり、左側と右側の部分の幅が固定され、変更に応じて中央の部分の幅が適応的に変化します。ブラウザの幅。前半の実装計画は似ていますが、違いは中盤の内容が双方にブロックされないようにする方法です。
準備段階
この部分は、二重翼レイアウトと聖杯レイアウトの実装計画の前半に属し、実装原理はフロートとネガティブ マージン テクノロジを使用することです。
-
中央の左、右の順に 3 つの div を書き込み、左と右の固定幅をそれぞれ 190px と 220px に設定します (これら 3 つの列を追加できます)初期の高さを一致させるために、min-width をコンテナとして追加することもできます。これにより、ウィンドウの幅が小さくなったときに中央部分が消える問題を回避できます。
-
この3つの列にfloatを追加します: left
-
width: 100%を中央に追加します
-
margin-left: -100% を左に追加し、中央の左にドラッグします
-
margin-left: -220 px を右に追加し、中央の左にドラッグします中央の右側
準備フェーズが完了すると、中央部分のコンテンツは両側によってブロックされます。次に、この問題に対する 2 つのレイアウトの解決策を紹介します。
解決策
二重翼レイアウト
中央にミドルラップのレイヤーを追加し、そのマージンを設定します: 0 220px 0 190px
以下完全なコード実装:
<!DOCTYPEhtml><htmllang="en"> <head> <metacharset="UTF-8"> <title>双飞翼布局</title> <styletype="text/css"> *{ margin: 0; padding: 0; } .middle, .left, .right{ float: left; min-height: 200px; } .middle{ width: 100%; background-color: green; } .middle-wrap{ margin: 0 220px 0 190px; } .left{ width: 190px; margin-left: -100%; background-color: red; } .right{ width: 220px; margin-left: -220px; background-color: blue; } .container{ min-width: 600px; } .header, .footer{ text-align: center; background-color: yellow; } .footer{ clear: both; } </style></head> <body> <divclass="header"> <h2>header</h2> </div> <divclass="container"> <divclass="middle"> <divclass="middle-wrap"> <h2>middle</h2> </div> </div> <divclass="left"> <h2>left</h2> </div> <divclass="right"> <h2>right</h2> </div> </div> <divclass="footer"> <h2>footer</h2> </div></body> </html> Holy Grail レイアウト
-
これら 3 つの列のコンテナー コンテナーにパディングを追加します: 0 220px 0 190px , これにより、コンテナ全体の左側と右側に 190px と 220px のパディングが残ります。
-
相対配置位置を設定します: 相対および左右へのオフセットにより、左右のパディングに移動します。
以下は完全なコード実装です:
<!DOCTYPEhtml><htmllang="en"> <head> <metacharset="UTF-8"> <title>圣杯布局</title> <styletype="text/css"> *{ margin: 0; padding: 0; } .middle, .left, .right{ float: left; min-height: 200px; } .left, .right{ position: relative; } .middle{ width: 100%; background-color: green; } .left{ width: 190px; margin-left: -100%; left: -190px; background-color: red; } .right{ width: 220px; margin-left: -220px; right: -220px; background-color: blue; } .container{ padding: 0 220px 0 190px; min-width: 600px; } .header, .footer{ text-align: center; background-color: yellow; } .footer{ clear: both; } </style></head> <body> <divclass="header"> <h2>header</h2> </div> <divclass="container"> <divclass="middle"> <h2>middle</h2> </div> <divclass="left"> <h2>left</h2> </div> <divclass="right"> <h2>right</h2> </div> </div> <divclass="footer"> <h2>footer</h2> </div></body> </html> 結論
-
2 つのレイアウトすべては、中間のコンテンツが最初にロードされることを実現できます。
-
聖杯レイアウトと比較して、二重飛行翼レイアウトでは div が 1 つ多く作成されますが、相対的な位置決めは必要ありません。ダブルフライングウイングレイアウトは互換性が良く、IE6にも対応可能です。ここの聖杯レイアウトは個人的にテストされており、IE8 と互換性があります。
参考記事
CSSレイアウト - 聖杯レイアウト＆双飛翼レイアウト
タオバオから始める双飛翼レイアウト入門UED
Holy Grail Layout
究極の CSS レイアウト ソリューション – Holy Grail Layout