CSS multi-column layout solution

CSS multi-column layout solution

1. Fixed width + adaptive

Expected effect: fixed width on the left, adaptive width on the right Common code:
html:

<div class="parent">
    <div class="left">
        <p>left menu</p>
    </div>
    <div class="right">
        <li>right item1</li>
        <li>right item2</li>
        <li>right item3</li>
    </div>
</div>

css:

html, body, p, ul, li {
    margin: 0;
    padding: 0;
}
div.left {
    background: #d2e3e3;
}
div.right {
    background: #77DBDB;
}

Solution 1: float

.left {
    float: left;
    width: 100px;
}
.right {
    margin-left: 100px; // or overflow: hidden
}

Solution 2: table

.parent {
    display: table;
    width: 100%;
    table-layout: fixed; // https://blog.csdn.net/qq_36699230/article/details/80658742
    .left, .right {
        display: table-cell;
    }
    .left {
        width: 100px;
    }
}

Option 3: flex

.parent {
    display: flex;
    .left {
        width: 100px; // or flex: 0 0 100px;
    }
    .right {
        flex: 1;
    }
}
  • Two (or more) columns with fixed width + adaptive layout can use the above solution. The setting of the middle column should be consistent with the first column.
  • Variable width (two or more columns) + adaptive layout can use the above solutions. The setting of the middle column can be consistent with the first column. The difference is that there is no need to set a special width. Special attention should be paid to the situation when using table layout, as follows:
.parent {
    display: table;
    width: 100%;
    // Setting table-layout: fixed; will make the cells equal in width, so .left, .right are not set here {
        display: table-cell;
    }
    .left {
        width: 0.1%; // Set the width to a minimum value. Since table-layout: fixed is not set, the width is determined by the content. white-space:nowrap;
    }
}

2. Equal width (two/multiple columns) layout

Public code:
html

<div class="parent">
    <div class="column">
        <p>1</p>
    </div>
    <div class="column">
        <p>2</p>
    </div>
    <div class="column">
        <p>3</p>
    </div>
    <div class="column">
        <p>4</p>
    </div>
</div>

CSS

html, body, div, p {
    margin: 0;
    padding: 0;
}
.parent {
    width: 800px;
    border: 1px solid coral;
    .column {
        height: 30px;
        background: bisque;
        p {
            background: #f0b979;
            height: 30px;
        }
    }
}

Solution 1: float (I personally don’t like it because it’s too rigid, requires knowing how many columns there are, and will exceed the container if there is a border)

.parent {
    margin-left: -20px;
    overflow: hidden;
    .column {
        float: left;
        width: 25%;
        padding-left: 20px;
        box-sizing: border-box;
    }
} 


Option 2: flex (recommended)

.parent {
    display: flex;
    .column {
        flex: 1;
        &+.column {
            margin-left: 10px;
        }
    }
} 

3. Equal height layout

Recommended Solution:

.parent {
    display: flex;
}
.left, .right {
    flex: 1;
}

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.

<<:  Web design experience: Make the navigation system thin

>>:  Some small methods commonly used in html pages

Recommend

Use iframe to display weather effects on web pages

CSS: Copy code The code is as follows: *{margin:0;...

Detailed explanation of how Node.js middleware works

Table of contents What is Express middleware? Req...

Detailed explanation of location and rewrite usage in nginx

1. Summary of location usage Location can locate ...

Advantages and Problems of XHTML CSS Website Design

XHTML is the standard website design language cur...

Docker deploys Mysql, .Net6, Sqlserver and other containers

Table of contents Install Docker on CentOS 8 1. U...

How to use vw+rem for mobile layout

Are you still using rem flexible layout? Does it ...

CSS isolation issue in Blazor

1. Environment VS 2019 16.9.0 Preview 1.0 .NET SD...

Several ways to encapsulate axios in Vue

Table of contents Basic Edition Step 1: Configure...

CSS to achieve text on the background image

Effect: <div class="imgs"> <!-...

Linux kernel device driver system call notes

/**************************** * System call******...

Front-end JavaScript thoroughly understands function currying

Table of contents 1. What is currying 2. Uses of ...

In-depth understanding of Linux load balancing LVS

Table of contents 1. LVS load balancing 2. Basic ...

Comprehensive analysis of isolation levels in MySQL

When the database concurrently adds, deletes, and...