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

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

青灯夜游

Release： 2018-10-24 16:29:19

forward

8573 people have browsed it

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

<!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>

Copy after login

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

<!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>

Copy after login

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

 <!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>

Copy after login

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!