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

Detailed explanation of NodeJS modularity

Table of contents 1. Introduction 2. Main text 2....

How to run MySQL in Docker environment and enable Binlog to configure master-slave synchronization

The same server simulates the master-slave synchr...

Solve the problem of being unable to ping the external network after installing Centos7 in VMware

A problem occurred when configuring a cluster. Or...

mysql backup script and keep it for 7 days

Script requirements: Back up the MySQL database e...

Detailed explanation of Linux command unzip

Table of contents 1. unzip command 1.1 Syntax 1.2...

How to use tcpdump to capture packets in Linux system

Let me look at the example code first: 1. Common ...

Deeply understand how nginx achieves high performance and scalability

The overall architecture of NGINX is characterize...

How to build svn server in linux

1: Install SVN yum install -y subversion 2. Creat...

Summary of naming conventions for HTML and CSS

CSS naming rules header: header Content: content/c...

Implementing carousel effects with JavaScript

This article shares the specific code for JavaScr...

Mysql slow query optimization method and optimization principle

1. For comparison of date size, the date format p...

How to manage users and groups when running Docker

Docker is a management tool that uses processes a...

Some summary of html to pdf conversion cases (multiple pictures recommended)

Due to work requirements, I recently spent some t...

Detailed graphic tutorial on silent installation of oracle12.2 on CentOS under VMware

Environmental preparation: VMware+CentOS, jdk 1. ...

Summary of MySQL composite indexes

Table of contents 1. Background 2. Understanding ...