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

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)

Recommend

A brief discussion on using Vue to complete the mobile apk project

Table of contents Basic Configuration Entry file ...

Echart Bar double column chart style most complete detailed explanation

Table of contents Preface Installation and Config...

MySQL uses events to complete scheduled tasks

Events can specify the execution of SQL code once...

How to manage docker through UI

Docker is being used in more and more scenarios. ...

Linux solves the problem that Deepin cannot start Google Chrome browser as root user

To solve the problem that Deepin cannot start Goo...

MySQL partition table is classified by month

Table of contents Create a table View the databas...

Linux operation and maintenance basics httpd static web page tutorial

Table of contents 1. Use the warehouse to create ...

Detailed tutorial on compiling and installing MySQL 8.0.20 from source code

In the previous article, we introduced: MySQL8.0....

Example code for implementing page floating box based on JS

When the scroll bar is pulled down, the floating ...

Difference between HTML4 and HTML5: How to add focus implementation code to an input

html4: Copy code The code is as follows: <form...

How to deploy Oracle using Docker on Mac

How to deploy Oracle using Docker on Mac First in...

HTML commonly used meta encyclopedia (recommended)

The Meta tag is an auxiliary tag in the head area...

Detailed tutorial on installing Python 3.8.1 on Linux

This example takes the installation of Python 3.8...

Summary of Textarea line break issues in HTML

Recently, I encountered a problem of whether the d...

Tomcat8 uses cronolog to split Catalina.Out logs

background If the catalina.out log file generated...