CSSで3列レイアウトを実装するにはどうすればよいですか? 3 列レイアウトを実装する 3 つの方法 (コード例)

今回の記事の内容はCSSで3カラムレイアウトを実装する方法を紹介するものです。 3 列レイアウトを実装する 3 つの方法 (コード例)。困っている友人は参考にしていただければ幸いです。

3 列レイアウトとは、両側の 2 列の固定幅を指し、中央の幅は適応されます。

一般的に使用される 3 つの方法:

• ポジショニング

• フローティング

• 弾性ボックスのレイアウト

配置方法

最も直観的で理解しやすい方法は、左右の列の絶対配置を選択し、ページの両側でそれらを修正します。側面では、中​​央の本文がマージンを使用して位置を決定することを選択します。

nbsp;html>


    <meta>
    <title>定位方法创建三列布局</title>
    <style>
    *{
        margin: 0;
        padding: 0;
    }
    .left{
        width: 200px;
        height: 500px;
        background-color: yellow;
        position: absolute; /* 绝对定位，使位置固定 */
        left: 0;
        top: 0;
    }
    .center{
        height: 600px;
        background-color: purple;
        margin: 0 300px 0 200px;   /* 通过外边距确定宽度 */
    }
    .right{
        width: 300px;
        height: 500px;
        background-color: red;
        position: absolute; /* 绝对定位，使位置固定 */
        right: 0;
        top: 0;
    }

    </style>


    <div>Left</div>
    <div>Center</div>
    <div>Right</div>

Result

フローティング方式

左右の部分をフローティングにして、ドキュメントの流れから離れた後の中央の部分にマージンを使用して適応させます

nbsp;html>


    <meta>
    <title>浮动法创建三列布局</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .left{
        width: 200px;
        height: 500px;
        background-color: yellow;
        float: left;
    }
    .center{
        height: 600px;
        background-color: purple;
        margin: 0 300px 0 200px;
        min-width: 100px;  /* 最小宽度，防止浏览器缩小后中间部分被隐藏 */
    }
    .right{
        width: 300px;
        height: 500px;
        background-color: red;
        float: right;
    }
    </style>


    <div>Left</div>
    <div>Right</div>
    <div>Center</div>  <!-- 左右部分脱离文档流，中间部分平铺 -->

フレキシブルボックスレイアウト

コンテナを使用して3つの列をラップし、コンテナの表示をフレックスに設定し、左右の部分の幅を固定に設定し、中央のフレックスを1に設定され、左側と右側の値は固定されるため、中央のadaptive

 nbsp;html>


    <meta>
    <title>弹性盒子创建三列布局</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .container{
            display: flex;
        }
        .left{
        width: 200px;
        height: 500px;
        background-color: yellow;
    }
    .center{
        height: 600px;
        flex: 1;
        background-color: purple;
    }
    .right{
        width: 300px;
        height: 500px;
        background-color: red;
    }
    </style>


    <div>
        <div>Left</div>
        <div>Center</div>  
        <div>Right</div>
    </div>

以上がCSSで3列レイアウトを実装するにはどうすればよいですか? 3 列レイアウトを実装する 3 つの方法 (コード例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。