Several methods and advantages and disadvantages of implementing three-column layout with CSS

Preface

The three-column layout, as the name suggests, is fixed on both sides and adaptive in the middle. The three-column layout is very common in actual development. For example, the homepage of Taobao is a typical three-column layout: the product navigation on the left and the navigation on the right are fixed widths, and the main content in the middle adapts to the browser width.

Let's assume a layout like this: the height is known, the width of the left and right columns are 300px each, and the middle is adaptive. How many ways can this be achieved? And what are their respective advantages and disadvantages?

Please click on the three-column layout source code for the source code of this article. Star and fork are welcome.

1. Floating layout

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Layout</title>
    <style media="screen">
        html * {
            padding: 0;
            margin: 0;
        }
        .layout article div {
            min-height: 150px;
        }
    </style>
</head>
<body>
    <!--Floating layout-->
    <section class="layout float">
        <style media="screen">
            .layout.float .left {
                float: left;
                width: 300px;
                background: red;
            }
            .layout.float .center {
                background: yellow;
            }
            .layout.float .right {
                float: right;
                width: 300px;
                background: blue;
            }
        </style>
        <h1>Three-column layout</h1>
        <article class="left-right-center">
            <div class="left"></div>
            <div class="right"></div> // The right column should be written before the middle content<div class="center">
                <h2>Floating Solutions</h2>
                1. This is a floating solution for a three-column layout; 2. This is a floating solution for a three-column layout; 3. This is a floating solution for a three-column layout; 4. This is a floating solution for a three-column layout; 5. This is a floating solution for a three-column layout; 6. This is a floating solution for a three-column layout;
            </div>
        </article>
    </section>
</body>
</html>

For this layout, the DOM structure must be written with the floating part first, and then the middle block, otherwise the right floating block will fall to the next line.
The advantage of floating layout is that it is relatively simple and has better compatibility. However, the floating layout has limitations. Floating elements are separated from the document flow and need to be cleared. If this is not handled properly, it will cause many problems, such as the height collapse of the parent container.

2. Absolute Layout

   <!--Absolute layout-->
    <section class="layout absolute">
        <style>
            .layout.absolute .left-center-right>div{
                position: absolute; // All three blocks are absolutely positioned}
            .layout.absolute .left {
                left:0;
                width: 300px;
                background: red;
            }
            .layout.absolute .center {
                right: 300px;
                left: 300px;//300px to the left and right background: yellow;
            }
            .layout.absolute .right {
                right: 0;
                width: 300px;
                background: blue;
            }
        </style>
        <h1>Three-column layout</h1>
        <article class="left-center-right">
            <div class="left"></div>
            <div class="center">
                <h2>Absolute positioning solution</h2>
                1. This is a floating solution for a three-column layout; 2. This is a floating solution for a three-column layout; 3. This is a floating solution for a three-column layout; 4. This is a floating solution for a three-column layout; 5. This is a floating solution for a three-column layout; 6. This is a floating solution for a three-column layout;
            </div>
            <div class="right"></div>
        </article>
    </section>

The advantages of absolute positioning layout are that it is fast, easy to set up, and not prone to problems. The disadvantage is that the container is out of the document flow, and the descendant elements are also out of the document flow. When the height is unknown, there will be problems, which leads to the poor effectiveness and usability of this method.

3. Flexbox layout

    <!--flexbox layout-->
    <section class="layout flexbox">
        <style>
            .layout.flexbox .left-center-right{
                display: flex;
            }
            .layout.flexbox .left {
                width: 300px;
                background: red;
            }
            .layout.flexbox .center {
                background: yellow;
                flex: 1;
            }
            .layout.flexbox .right {
                width: 300px;
                background: blue;
            }
        </style>
        <h1>Three-column layout</h1>
        <article class="left-center-right">
            <div class="left"></div>
            <div class="center">
                <h2>Flexbox solution</h2>
                1. This is a floating solution for a three-column layout; 2. This is a floating solution for a three-column layout; 3. This is a floating solution for a three-column layout; 4. This is a floating solution for a three-column layout; 5. This is a floating solution for a three-column layout; 6. This is a floating solution for a three-column layout;
            </div>
            <div class="right"></div>
        </article>
    </section>

Flexbox layout is a new one in CSS3. It is designed to solve the shortcomings of the above two methods and is a more perfect one. Currently, the layout of mobile terminals also uses flexbox. The disadvantage of flexbox is that it is only supported in IE10, but the IE10 version is in -ms format.

4. Table Layout

<!--Table layout-->
    <section class="layout table">
        <style>
            .layout.table .left-center-right {
                display: table;
                height: 150px;
                width: 100%;
            }
            .layout.table .left-center-right>div {
                display: table-cell;
            }
            .layout.table .left {
                width: 300px;
                background: red;
            }
            .layout.table .center {
                background: yellow;
            }
            .layout.table .right {
                width: 300px;
                background: blue;
            }
        </style>
        <h1>Three-column layout</h1>
        <article class="left-center-right">
            <div class="left"></div>
            <div class="center">
                <h2>Table layout solution</h2>
                1. This is a floating solution for a three-column layout; 2. This is a floating solution for a three-column layout; 3. This is a floating solution for a three-column layout; 4. This is a floating solution for a three-column layout; 5. This is a floating solution for a three-column layout; 6. This is a floating solution for a three-column layout;
            </div>
            <div class="right"></div>
        </article>
    </section>

The compatibility of table layout is very good (see the figure below). When flex layout is incompatible, you can try table layout. When the content overflows, it will automatically expand the parent element.

The table layout also has defects: ① It is impossible to set column margins; ② It is not SEO-friendly; ③ When the height of one cell exceeds the limit, the cells on both sides will also become higher, but sometimes this is not the effect we want.

5. Grid Layout

    <!--Grid layout-->
    <section class="layout grid">
        <style>
            .layout.grid .left-center-right {
                display: grid;
                width: 100%;
                grid-template-columns: 300px auto 300px;
                grid-template-rows: 150px; //row height}
            .layout.grid .left {
                background: red;
            }
            .layout.grid .center {
                background: yellow;
            }
            .layout.grid .right {
                background: blue;
            }
        </style>
        <h1>Three-column layout</h1>
        <article class="left-center-right">
            <div class="left"></div>
            <div class="center">
                <h2>Grid layout solution</h2>
                1. This is a floating solution for a three-column layout; 2. This is a floating solution for a three-column layout; 3. This is a floating solution for a three-column layout; 4. This is a floating solution for a three-column layout; 5. This is a floating solution for a three-column layout; 6. This is a floating solution for a three-column layout;
            </div>
            <div class="right"></div>
        </article>
    </section>

CSS Grid is the most powerful and easiest tool for creating grid layouts. Like tables, grid layouts allow web designers to align elements in columns or rows, but unlike tables, grid layouts have no content structure, making it impossible to create a variety of layouts like tables. For example, child elements within a grid layout can all position themselves so that they can overlap and be positioned similarly.

But the compatibility of grid layout is not good. Supported on IE10+, but only some properties are supported.

VI. Conclusion

Based on the advantages and disadvantages of the five layouts introduced in detail above, which layout is the best choice in actual development? I believe readers will have their own answers in their hearts.
I think flex and grid layouts can handle the layout in actual development. Assuming that both browsers support these two modules, will you choose grid or flexbox to layout the page? Flexbox is a one-dimensional layout, it can only place your content blocks in a straight line; grid is a two-dimensional layout. As mentioned briefly before, you can place the content block wherever you want according to your design requirements. So without further ado, you should know which one is more suitable for your layout. In addition, if you want to be compatible with lower versions of IE (such as IE8+), you can consider table layout.

Finally, I would like to ask everyone a question. If the middle part is stretched by the content height, the left and right columns need to be stretched as well. Which of these five layouts can still be used?

Answer: flex layout and table layout

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

<<: Getting started with JavaScript basics

>>: How to install MySQL 8.0 database on M1 chip (picture and text)

Unicode signature BOM (Byte Order Mark) issue for UTF-8 files

Several methods and advantages and disadvantages of implementing three-column layout with CSS

Unicode signature BOM (Byte Order Mark) issue for UTF-8 files

HTML marquee tag usage examples

Detailed explanation of type protection in TypeScript

How to ensure that every page of WeChat Mini Program is logged in

Detailed explanation of the difference between "/" and "~" in Linux

Ubuntu MySQL version upgraded to 5.7

7 skills that great graphic designers need to master

Solution to the Mysql ERROR 1045 (28000): Access denied for user root@localhost problem in Ubuntu system

How to implement input checkbox to expand the click range

Centos7 Zabbix3.4 email alarm configuration (solving the problem that the email content is xx.bin attachment)

Recommend

MySQL 5.7.19 winx64 free installation version configuration tutorial

How to reset your Linux password if lost

Summary of data interaction between Docker container and host

Introduction to TypeScript interfaces

Four completely different experiences in Apple Watch interaction design revealed

MySQL performance optimization tips

JavaScript to achieve time range effect

Five delay methods for MySQL time blind injection

Description of the execution mechanisms of static pages and dynamic pages

MySQL limit performance analysis and optimization

Detailed explanation of the Sidecar mode in Docker Compose

How to change the root password of Mysql5.7.10 on MAC

A brief analysis of MySQL locks and transactions

How to install and configure Docker nginx

How to install and deploy gitlab server on centos7