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)

js simulation to achieve the effect of enlarging the picture on the Jingdong details page

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

js simulation to achieve the effect of enlarging the picture on the Jingdong details page

Docker image compression and optimization operations

How to solve the problem of case insensitivity in MySQL queries

Detailed explanation of Vue's caching method example

MySQL Basic Tutorial Part 1 MySQL5.7.18 Installation and Connection Tutorial

CSS polar coordinates example code

MySQL Flush-List and dirty page flushing mechanism

How to get the intersection/difference/union of two sets in mysql

Detailed explanation of how to create MySql scheduled tasks in navicat

Discussion on the problem of iframe node initialization

Recommend

Introduction to document.activeELement focus element in JavaScript

A method of making carousel images with CSS3

Solution to many line breaks and carriage returns in MySQL data

Solution to large line spacing (5 pixels more in IE)

js Promise concurrent control method

Does the website's text still need to be designed?

How to operate MySql database with gorm

Solution to the problem of mysql master-slave switch canal

How to delete an image in Docker

Mini Program natively implements left-slide drawer menu

Simple use of Vue vee-validate plug-in

MySQL scheduled full database backup

HTML structured implementation method

Detailed explanation of vite+ts to quickly build vue3 projects and introduce related features

How to use explain to query SQL execution plan in MySql