CSSで3列レイアウトを実装する方法

実装方法:

1. Float フローティング

<section class=&#39;layout float&#39;>
         <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で3列レイアウトを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。