ホームページ > 記事 > ウェブフロントエンド > 6 つの古典的な CSS 3 列レイアウト ソリューション
6 つの古典的な CSS 3 列レイアウト ソリューション
- 小云云オリジナル
- 2017-12-04 13:32:5810379ブラウズ
CSS はフロントエンド開発プログラマーにとって不可欠な言語です。CSS を使いこなすことができれば、フロントエンド開発の作業が大幅に改善されます。この記事では、主に古典的な CSS の 3 列レイアウト スキームを紹介し、それを皆さんと共有します。
3 列レイアウトは、名前が示すように、両側が固定され、中央が適応します。 3 列レイアウトは開発において非常に一般的です
1. float レイアウト
最も単純な 3 列レイアウトは、レイアウトに float を使用することです。まず、左右の列を描画します:
<style>
.left {
float: left;
width: 100px;
height: 200px;
background-color: red;
}
.right {
float: right;
width: 100px;
height: 200px;
background-color: yellow;
}
</style>
<p class="container">
<p class="left"></p>
<p class="right"></p>
<p class="main"></p>
</p>
この時点で、左右の列の分布を取得できます:
次に、中央の列の処理方法を見てみましょう。 float 要素の場合、ドキュメント フローから切り離され、他のボックスはこの要素を無視することがわかっています。 (ただし、他のボックス内のテキストはこの要素用のスペースを確保し、それを囲みます。) したがって、現時点では、コンテナー コンテナーに通常の p を追加するだけで済みます。これにより、左右が無視され、コンテナー全体が埋められます。さらに、マージンが左右にあり、スペースが流出します:
<style>
.left {
float: left;
width: 100px;
height: 200px;
background-color: red;
}
.right {
float: right;
width: 100px;
height: 200px;
background-color: yellow;
}
.main {
background-color: green;
height: 200px;
margin-left: 120px;
margin-right: 120px;
}
.container {
border: 1px solid black;
}
<p class="container">
<p class="left"></p>
<p class="right"></p>
<p class="main"></p>
</p>
長所: シンプル
短所: 中央部分が最後にロードされるため、コンテンツが多い場合はエクスペリエンスに影響します
2. BFC ルール
BFC (ブロック フォーマット コンテキスト) ルールでは、BFC が浮動要素と重複しないことが規定されています。したがって、メイン要素を BFC 要素として設定すると:
<style>
.left {
float: left;
width: 100px;
height: 200px;
background-color: red;
}
.right {
float: right;
width: 100px;
height: 200px;
background-color: yellow;
}
.main {
background-color: green;
height: 200px;
overflow: hidden;
}
<p class="container">
<p class="left"></p>
<p class="right"></p>
<p class="main"></p>
</p>
3. 聖杯レイアウト
聖杯レイアウトの核心は、左、中央、右の列がすべて float によってフローティングされることです。次に、負の値のマージンを調整してください。
最初のステップは、基本的なレイアウトを確認することです
<style>
.left {
float: left;
width: 100px;
height: 200px;
background-color: red;
}
.right {
float: left;
width: 100px;
height: 200px;
background-color: yellow;
}
.main {
float: left;
width: 100%;
height: 200px;
background-color: blue;
}
</style>
<body>
<p class="container">
<p class="main"></p>
<p class="left"></p>
<p class="right"></p>
</p>
</body>
この時点で見られる効果は次のとおりです: 左右の列が 2 行目に押し込まれています。これは main の width が 100% であるためです。次に、左と右の列のマージンを調整して、左、中央、右を 1 行に配置します。
.left {
float: left;
width: 100px;
height: 200px;
margin-left: -100%;
background-color: red;
}
.right {
float: left;
width: 100px;
height: 200px;
margin-left: -100px;
background-color: yellow;
}
2 番目のステップは、左のマージン左を -100% に設定することです。今度は、左の列が最初の行の先頭に移動します。次に、右の margin-left を負の幅の値 -100px に設定すると、右の列も左と中央の列と同じ行に移動されます:
しかし、まだ完了していません。メインにテキストを追加してみます:
<body>
<p class="container">
<p class="main">fjlskdjflkasjdfljasdljlsjdljsdjflksadj</p>
<p class="left"></p>
<p class="right"></p>
</p>
</body>
テキストが抑制されていることがわかります。次にこの問題を解決する必要があります。
3 番目のステップは、コンテナにパディングを与えることです。これは、左右の列の幅と正確に同じである必要があります:
.container {
padding-left: 100px;
padding-right: 100px;
}
この時点で表示される結果は、左、中央、右の列です。全体的に列はすべて縮小されましたが、テキストはまだ抑制されています。
4 番目のステップは、左右の列に相対レイアウトを追加し、左右の値を設定してそれらを外側に移動することです:
.left {
float: left;
width: 100px;
height: 200px;
margin-left: -100%;
position: relative;
left: -100px;
background-color: red;
}
.right {
float: left;
width: 100px;
height: 200px;
margin-left: -100px;
position: relative;
right: -100px;
background-color: yellow;
}
以上で完了です:
4. 二重飛行翼レイアウト
二重飛行翼レイアウトの最初の 2 つのステップは、中央の列のコンテンツがブロックされる問題の解決策が異なることを除いて、聖杯レイアウトと同じです。 :
メイン部分のコンテンツがブロックされるため、メイン内に別のコンテンツを追加し、オクルージョンを避けるためにそのマージンを設定すると、問題は解決できます:
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.main {
float: left;
width: 100%;
}
.content {
height: 200px;
margin-left: 110px;
margin-right: 220px;
background-color: green;
}
.main::after {
display: block;
content: '';
font-size: 0;
height: 0;
clear: both;
zoom: 1;
}
.left {
float: left;
height: 200px;
width: 100px;
margin-left: -100%;
background-color: red;
}
.right {
width: 200px;
height: 200px;
float: left;
margin-left: -200px;
background-color: blue;
}
</style>
</head>
<body>
<p class="main">
<p class="content"></p>
</p>
<p class="left"></p>
<p class="right"></p>
</body>
</html>
注意すべき唯一のことは、 float をクリアするには main の後に要素を追加する必要があります。
5. Flex レイアウト
Flex レイアウトを使用して 3 列レイアウトを実装することも非常に簡単ですが、ブラウザの互換性に注意する必要があります:
注意すべき点がいくつかあります:
- Main が最初にロードされる場合は、Main を最初に記述する必要がありますが、left を一番左に表示する必要があるため、left の順序を -1 に設定する必要があります
- flex 属性の記述方法は、flex: flex-grow、flex-shrink、flex-basis です。これは flex の 3 列レイアウトの核心でもあり、Main は flex-grow を 1 に設定します。これは、十分なスペースがない場合、左側と右側の部分のみが縮小されることを意味します。同時に、左側と右側の部分のフレックスベースが指定されているため、表示効果を確保するために 2 つの幅が増加します
絶対位置決め方法も比較的簡単です。本体を最初にロードできます:
<style type="text/css">
.container {
display: flex;
flex-direction: row;
}
.middle {
height: 200px;
background-color: red;
flex-grow: 1;
}
.left {
height: 200px;
order: -1;
margin-right: 20px;
background-color: yellow;
flex: 0 1 200px;
}
.right {
height: 200px;
margin-left: 20px;
background-color: green;
flex: 0 1 200px;
}
</style>
</head>
<body>
<p class="container">
<p class="middle">fsdfjksdjflkasjdkfjsdkljfklsjadfkljaksdljfskljffjksldfjldsfdskjflsdjfkljsdlfjsldjfklsjdkflj</p>
<p class="left"></p>
<p class="right"></p>
</p>
</body>
上記の内容は、6 つの古典的な CSS 3 列レイアウト プランについてです。
関連する推奨事項:
Web ページをレイアウトするとき、最初に HTML と CSS を記述するべきですか?
HTML Web ページのレイアウトにおける div と span の違いは何ですか?
以上が6 つの古典的な CSS 3 列レイアウト ソリューションの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。