How to implement three-column layout with CSS? 3 ways to implement a three-column layout (code example)

The content of this article is to introduce how to implement three-column layout with CSS? 3 ways to implement a three-column layout (code example). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Three-column layout refers to the fixed width of the two columns on both sides, and the width in the middle is adaptive.

Three commonly used methods:

• Positioning

• Floating

• Elasticity Box layout

Positioning method

The most intuitive and easy-to-understand method is to select absolute positioning for the left and right columns and fix them on both sides of the page. On the side, the middle body chooses to use margin to determine the position

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

Floating method

Let the left and right parts float, and use margin to adapt to the middle part after breaking away from the document flow

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>  <!-- 左右部分脱离文档流，中间部分平铺 -->

Flexible box layout

Use a container to wrap the three columns, and The display of the container is set to flex, the width of the left and right parts is set to fixed, the middle flex is set to 1, and the values ​​​​of the left and right sides are fixed, so the middle 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>

The above is the detailed content of How to implement three-column layout with CSS? 3 ways to implement a three-column layout (code example). For more information, please follow other related articles on the PHP Chinese website!