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

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

青灯夜游

リリース： 2018-10-24 16:29:19

転載

8563 人が閲覧しました

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

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

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

ポジショニング
フローティング
弾性ボックスのレイアウト

配置方法

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <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>
</head>
<body>
    <div>Left</div>
    <div>Center</div>
    <div>Right</div>
</body>
</html>

ログイン後にコピー

Result

フローティング方式

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <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>
</head>
<body>
    <div>Left</div>
    <div>Right</div>
    <div>Center</div>  <!-- 左右部分脱离文档流，中间部分平铺 -->
</body>
</html>

ログイン後にコピー

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

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

 <!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <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>
</head>
<body>
    <div>
        <div>Left</div>
        <div>Center</div>  
        <div>Right</div>
    </div>
</body>
</html>

ログイン後にコピー

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