Implementing Three-column Layout

Three-column layout is very common in development, where the two sides have fixed widths and the middle column has adaptive width.

Flex

Use CSS3's flex layout to implement the three-column layout. Flex layout, also known as flexible layout, provides the maximum flexibility for box models and is the preferred solution for layout. It is now supported by all modern browsers. In this case, we mainly use the default arrangement of flex container members along the main axis, and use the shorthand form of flex properties, namely flex-grow, flex-shrink, and flex-basis, to make the blocks adaptively expand.

<!DOCTYPE html>
<html>
<head>
    <title>FLEX</title>
    <style type="text/css">
        .container{
            display: flex;
            height: 200px;
            border: 1px solid #eee;
        }
        .container > div{
            color: #fff;
        }
        .container > .left{
            width: 200px;
            background-color: #19be6b;
        }
        .container > .main{
            flex: 1;
            background-color: #2979ff;
        }
        .container > .right{
            width: 200px;
            background-color: #fa3534;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="left">left</div>
        <div class="main">main</div>
        <div class="right">right</div>
    </div>
</body>
</html>

Calc

By using calc in CSS, the length of the middle section can be dynamically calculated to achieve adaptability. Calc can be used with inline-block inline block-level elements to implement the three-column layout. Note that when using inline block-level elements, if there are line breaks in the HTML code, these blank line breaks will also be interpreted as elements, resulting in white spaces. Therefore, do not use line breaks in this part when writing the code. In addition, calc can also be used in combination with float to achieve the same result.

<!DOCTYPE html>
<html>
<head>
    <title>Calc</title>
    <style type="text/css">
        .container{
            height: 200px;
            border: 1px solid #eee;
        }
        .container > div{
            display: inline-block;
            height: 100%;
            color: #fff;
        }
        .container > .left{
            width: 200px;
            background-color: #19be6b;
        }
        .container > .main{
            width: calc(100% - 400px);
            background-color: #2979ff;
        }
        .container > .right{
            width: 200px;
            background-color: #fa3534;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="left">left</div><div class="main">main</div><div class="right">right</div>
    </div>
</body>
</html>

BFC

BFC (Block Formatting Context) is part of the visual CSS rendering of a web page. It is the area where the layout of block boxes occurs and where floating elements interact with other elements. It is a rendering area used for laying out block-level boxes and is completely independent of the outside area. It is an environment where the feature of not overlapping with floating elements is utilized to achieve a three-column layout.

<!DOCTYPE html>
<html>
<head>
    <title>BFC</title>
    <style type="text/css">
        .container{
            height: 200px;
            border: 1px solid #eee;
        }
        .container div{
            color: #fff;
            height: 100%;
        }
        .container > .left{
            float: left;
            width: 200px;
            background-color: #19be6b;
        }
        .container > .main{
            display: flex; /* One of the triggering conditions for BFC: a flex or inline-flex element is a direct child of the element. */
            background-color: #2979ff;
        }
        .container > .right{
            float: right;
            width: 200px;
            background-color: #fa3534;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="left">left</div>
        <div class="right">right</div>
        <div class="main">main</div>
        
    </div>
</body>
</html>

Margin

This method is to make the left and right modules float to the left and right respectively, and set the margin value of the middle module to make the width of the middle module adapt to the content.

<!DOCTYPE html>
<html>
<head>
    <title>Margin</title>
    <style type="text/css">
        .container{
            height: 200px;
            border: 1px solid #eee;
        }
        .container div{
            color: #fff;
            height: 100%;
        }
        .container > .left{
            float: left;
            width: 200px;
            background-color: #19be6b;
        }
        .container > .main{
            margin-left: 200px;
            margin-right: 200px;
            background-color: #2979ff;
        }
        .container > .right{
            float: right;
            width: 200px;
            background-color: #fa3534;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="left">left</div>
        <div class="right">right</div>
        <div class="main">main</div>
        
    </div>
</body>
</html>

Float

Use Float with margin to achieve a three-column layout, mainly by applying negative values to margin.

<!DOCTYPE html>
<html>
<head>
    <title>Float</title>
    <style type="text/css">
        .container{
            height: 200px;
            border: 1px solid #eee;
        }
        .container div{
            color: #fff;
            height: 100%;
        }
        .container > .left{
            float: left;
            width: 200px;
            margin-left: -100%;
            background-color: #19be6b;
        }
        .container > .main-container{
            float: left;
            width: 100%;
        }
        .container > .main-container > .main{
            margin-left: 200px;
            margin-right: 200px;
            background-color: #2979ff;
        }
        .container > .right{
            float: right;
            width: 200px;
            margin-left: -200px;
            background-color: #fa3534;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="main-container">
            <div class="main">main</div>
        </div>
        <div class="left">left</div>
        <div class="right">right</div>
    </div>
</body>
</html>

Table

Use table layout to achieve a three-column layout.

<!DOCTYPE html>
<html>
<head>
    <title>Table</title>
    <style type="text/css">
        .container{
            display: table;
            height: 200px;
            width: 100%;
            border: 1px solid #eee;
        }
        .container > div{
            display: table-cell;
            color: #fff;
        }
        .container > .left{
            width: 200px;
            background-color: #19be6b;
        }
        .container > .main{
            background-color: #2979ff;
        }
        .container > .right{
            width: 200px;
            background-color: #fa3534;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="left">left</div>
        <div class="main">main</div>
        <div class="right">right</div>
    </div>
</body>
</html>

Grid

Currently in CSS layout solutions, grid layout can be considered as the most powerful layout solution. It can divide the webpage into grids and then use these grids to create various layouts. Grid layout is similar to Flex layout in that it can specify the position of multiple members inside the container. The difference is that Flex layout is a line layout, which can only specify the position of members relative to the line, and can be regarded as a one-dimensional layout. Grid layout divides the container into rows and columns, generating cells, and then specifies the cell in which the member is located, which can be regarded as a two-dimensional layout.

<!DOCTYPE html>
<html>
<head>
    <title>Grid</title>
    <style type="text/css">
        .container{
            height: 200px;
            display: grid;
            grid-template-columns: 200px auto 200px;
            border: 1px solid #eee;
        }
        .container > div{
            color: #fff;
        }
        .container > .left{
            background-color: #19be6b;
        }
        .container > .main{
            background-color: #2979ff;
        }
        .container > .right{
            background-color: #fa3534;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="left">left</div>
        <div class="main">main</div>
        <div class="right">right</div>
    </div>
</body>
</html>

Daily Question

https://github.com/WindrunnerMax/EveryDay

Reference

https://zhuanlan.zhihu.com/p/25070186 https://juejin.cn/post/6844903686758465550 https://juejin.cn/post/6844904062224171021