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

Blog    

Recommend

MySQL loop inserts tens of millions of data

1. Create a test table CREATE TABLE `mysql_genara...

MySQL 8.0.24 version installation and configuration method graphic tutorial

This article records the installation and configu...

What you need to know about msyql transaction isolation

What is a transaction? A transaction is a logical...

js implements a simple calculator

Use native js to implement a simple calculator (w...

JavaScript realizes the queue structure process

Table of contents 1. Understanding Queues 2. Enca...

Vue+js realizes video fade-in and fade-out effect

Vue+js realizes the fade in and fade out of the v...

In IIS 7.5, HTML supports the include function like SHTML (add module mapping)

When I first started, I found a lot of errors. In...

How to create scheduled tasks using crond tool in Linux

Preface Crond is a scheduled execution tool under...

js to achieve the effect of dragging the slider

This article shares the specific code of how to d...

MySQL compression usage scenarios and solutions

Introduction Describes the use cases and solution...

Detailed explanation of Mysql function call optimization

Table of contents Function call optimization Func...