ホームページ > 記事 > ウェブフロントエンド > CSSで3列レイアウトを実装する方法
実装方法:
1. Float フローティング
<section class='layout float'> <style> .layout.float .left-right-center{ height: 100px; } .layout.float .left{ float: left; width: 300px; background-color: red; } .layout.float .right{ float: right; width: 300px; background-color: blue; } .layout.float .center{ background-color: yellow; } </style> <article class="left-right-center"> <div class="left"></div> <div class="right"></div> <div class="center">我是中间的自适应元素--浮动</div> </article> </section>
原則: フローティングにより左右の div がドキュメント フローから分離され、中心が上に移動し、3 列レイアウトの効果が得られます (高さが同じである場合)
長所: 高い互換性
短所: 影響を防ぐためにフロートをクリアする必要があります。その他の要素
高さが固定されていない場合、中央のコンテンツは引き伸ばされ、左側と右側は一緒に引き伸ばされません
(推奨チュートリアル: CSS チュートリアル)
2. 絶対位置決め
<section class="layout absolute"> <style> .layout.absolute .left-center-right div{ position: absolute; height: 100px; } .layout.absolute .left{ left: 0; width: 300px; background-color: red; } .layout.absolute .center{ left: 300px; right: 300px; background-color: yellow; } .layout.absolute .right{ right: 0; width: 300px; background-color: blue; } </style> <article class="left-center-right"> <div class="left"></div> <div class="center"> 我是中间的自适应元素--绝对定位 </div> <div class="right"></div> </article> </section>
原則: 絶対位置決めと幅を使用して左側と右側の div を固定し、中央の div の幅は適応型になります。効果
利点: 迅速な
欠点: 親要素が切り離された場合ドキュメント フローがないと、子要素は確実にドキュメント フローから切り離され、適用シナリオは多くありません
中央の要素の高さが増加しても、両側の要素の高さは増加しないため、中央の div のみが引き伸ばされます
3. フレックス レイアウト
<section class="layout flex"> <style> .layout.flex .left-center-right{ display: flex; height: 100px; } .layout.flex .left{ width: 300px; background-color: red; } .layout.flex .center{ flex: 1; background-color: yellow; } .layout.flex .right{ width: 300px; background-color: blue; } </style> <article class="left-center-right"> <div class="left"></div> <div class="center"> 我是中间的自适应元素--flex布局 </div> <div class="right"></div> </article> </section>
原則: 親要素を flex レイアウトに設定し、アダプティブ効果を実現するために中間要素の flex を 1 に設定します。
利点: 実際の開発でよく使用されます
欠点: IE8 以下のブラウザーサポートしていません
高さが固定されていない場合、中央のコンテンツの高さが拡張された後、それに応じて両側も拡張されます
4. テーブルのレイアウト
<section class="layout table"> <style> .layout.table .left-center-right{ display: table; height: 100px; width: 100%; } .layout.table .left{ display: table-cell; width: 300px; background-color: red; } .layout.table .center{ display: table-cell; background-color: yellow; } .layout.table .right{ display: table-cell; width: 300px; background-color: blue; } </style> <article class="left-center-right"> <div class="left"></div> <div class="center"> 我是中间的自适应元素--table </div> <div class="right"></div> </article> </section>
原則: 親要素をテーブル レイアウトに設定し、各子要素を teble-cell に設定します。左右のグリッドに固定幅を設定すると、中央のグリッドが適応効果を実現できます
利点: 優れた互換性、IE8 以下のフレックス レイアウトの代替として使用できます。
欠点: 制限事項
高さが固定されていない場合、中央が伸びると、左側と右側も伸びます。グリッド レイアウト
<section class="layout grid"> <style> .layout.grid .left-center-right{ display: grid; width: 100%; grid-template-rows: 100px;/*每一格都是100px高*/ grid-template-columns: 300px auto 300px;/*左右两格都是300px,中间是自适应*/ } .layout.grid .left{ background-color: red; } .layout.grid .center{ background-color: yellow; } .layout.grid .right{ background-color: blue; } </style> <article class="left-center-right"> <div class="left"></div> <div class="center"> 我是中间的自适应元素--grid布局 </div> <div class="right"></div> </article> </section>
原則: 親要素をグリッド レイアウトに設定し、各グリッドの高さと幅を指定します。各グリッドの色を設定するだけです。セルを個別に
長所: 比較的新しい技術で便利です
短所: 互換性があまり良くありません
高さが固定されていない場合は、中央の要素にテキストを追加します
関連ビデオ チュートリアルの推奨事項:
css ビデオ チュートリアル以上がCSSで3列レイアウトを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。