css implements three-column layout

float layout: float + margin
position layout: position + left + right
table layout: table+ table-cell
flex layout: flex
grid layout: slightly

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>使用float实现三列布局[注意:中间div标签放的位置,必须放在末尾,放在中间会把右侧的div挤下去]</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .left {
            float: left;
            width: 100px;
            height: 100px;
            background-color: chartreuse;
        }

        .right {
            float: right;
            width: 100px;
            height: 100px;
            background-color: chocolate;
        }

        .center {
            height: 100px;
            margin-left: 100px;
            margin-right: 100px;
            background-color: cornflowerblue;
        }
    </style>
</head>

<body>
    <div class="main">
        <div class="left"></div>
        <div class="right"></div>
        <div class="center"></div>
    </div>
</body>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>使用position实现三列布局</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .main div {
            height: 100px;
        }

        .left {
            position: absolute;
            left: 0;
            width: 100px;
            background-color: cornflowerblue;
        }

        .right {
            position: absolute;
            right: 0;
            width: 100px;
            background-color: crimson;
        }

        .center {
            position: absolute;
            left: 100px;
            right: 100px;
            background-color: darkcyan;
        }
    </style>
</head>

<body>
    <div class="main">
        <div class="left"></div>
        <div class="center"></div>
        <div class="right"></div>
    </div>
</body>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>使用table布局是现三列布局</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .main {
            width: 100%;
            display: table;
        }

        .left,
        .center,
        .right {
            display: table-cell;
        }

        .left {
            width: 100px;
            height: 100px;
            background-color: darkcyan;
        }

        .right {
            width: 100px;
            height: 100px;
            background-color: darkgoldenrod;
        }

        .center {
            height: 100px;
            background-color: darkmagenta;
        }
    </style>
</head>

<body>
    <div class="main">
        <div class="left"></div>
        <div class="center"></div>
        <div class="right"></div>
    </div>
</body>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>弹性flex实现三列布局</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .main {
            display: flex;
        }

        .left {
            width: 100px;
            height: 100px;
            background-color: darkcyan;
        }

        .right {
            width: 100px;
            height: 100px;
            background-color: darkgoldenrod;
        }

        .center {
            width: calc(100% - 200px);
            height: 100px;
            background-color: darkmagenta;
        }
    </style>
</head>

<body>
    <div class="main">
        <div class="left"></div>
        <div class="center"></div>
        <div class="right"></div>
    </div>
</body>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>利用网格(grid)布局实现三列布局</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .main div {
            width: 100px;
            display: grid;
            grid-template-rows: 100px;
            grid-template-columns: 100px auto 100px;
        }

        .left {
            background-color: darkcyan;
        }

        .right {
            background-color: darkgoldenrod;
        }

        .center {
            background-color: darkmagenta;
        }
    </style>
</head>

<body>
    <div class="main">
        <div class="left"></div>
        <div class="center"></div>
        <div class="right"></div>
    </div>
</body>

</html>

Summary:
The above provides 5 ways to achieve a three-column layout, so what are their advantages and disadvantages?
1. Float layout is the most commonly used layout at present. Many portals currently use this layout method. When using it, you only need to pay attention to clearing the float.
2. The Position layout is only to directly set the position of the element according to the positioning attribute. I personally feel that it is not suitable for page layout.
3. The table layout is easy to use, and there is no problem with compatibility, which is not conducive to search engines to capture information.
4. Flex layout comparison Powerful, but there are still compatibility issues with IE, and it can only support IE9 and above.
5. The grid layout is very powerful, but the compatibility is poor.
Reference link: https://www.cnblogs.com/webtaotao/p/11031723.html

css implements three-column layout

Guess you like