Share a summary of how to implement CSS two-column layout

This article mainly introduces a summary of CSS two-column layout implementation methods, and discusses some practices and issues including absolute + margin and float + margin methods. Friends in need can refer to

Two-column layout It is probably the most classic web page layout method, and this blog uses this layout. In a two-column layout, it is most common that the main column (main) has an adaptive width and the sub-column (sidebar) has a fixed width.
Today, let’s discuss how to implement this fixed-width + adaptive two-column layout.

1. Absolute + margin method

The first thing that comes to mind is to use absolute + margin method. Let’s take a look at the code first:

<p class="container">
    <p class="sidebar">子列</p>
    <p class="main">主列</p>
</p>

.container {   
 position: relative;   
}   
.sidebar {   
 position: absolute;   
 top: 0;   
 left: 0;   
 width: 200px;   
 height: 300px;   
 background-color: rgba(255, 0, 0, .5);   
}   
.main {   
 height: 300px;   
 margin-left: 210px;   
 background-color: rgba(0, 255, 0, .5);   
}

This method uses position to separate the sidebar column from the document flow, and then removes the part covered by the sidebar column through the margin-left of the main column. In this way, we have achieved a fixed-width + adaptive two-column layout.

(1) Column order adjustment

Without modifying the HTML, just simply modify the CSS, we can interchange the order of the left and right columns, see Code:

.sidebar {   
 position: absolute;   
 top: 0;   
 rightright: 0;   
}   
.main {   
 margin-right: 210px;   
}

(2) The main content column is displayed first

Let us think more perfectly, can we put the main column in the sidebar at the front of the column so that the main content loads and renders first? Let us try!

<p class="container">
    <p class="main">主列</p>
 <p class="sidebar">子列</p>
</p>

Just make the simple adjustments above, no CSS changes are required!

(3) The problem

Although this method has many advantages, it has a fatal shortcoming. Because the sidebar column is separated from the document flow, when the sidebar column is higher than the main column, it will cover the subsequent layout: problem demo.
If you add overflow:hidden to the container container, the overflow part of the sidebar will be cut. In this layout, there really is no effective solution to this problem.

2. float + margin method

The next thing that comes to mind is float + margin to implement a two-column layout. First, the left column has a fixed width and the main content is adaptive. Column layout. The code is as follows:

<p class="sidebar">子列</p>
<p class="main">主列</p>

.sidebar {   
 float: left;   
 width: 200px;   
 height: 300px;   
 background-color: rgba(255, 0, 0, .5);   
}   
.main {   
 height: 300px;   
 margin-left: 210px;   
 background-color: rgba(0, 255, 0, .5);   
}

This implementation method is relatively simple. First float the sub-column to the left, and then set margin-left on the main column to leave display space for the sub-column.

So, does this method support changing the position of columns? sure. The CSS code is as follows:

.sidebar {   
 float: rightright;   
 width: 200px;   
 height: 300px;   
 background-color: rgba(255, 0, 0, .5);   
}   
.main {   
 height: 300px;   
 margin-right: 210px;   
 background-color: rgba(0, 255, 0, .5);   
}

The problem:

It seems that the float + margin method is a good way, but the main column we mentioned earlier is displayed first. Optimization cannot be achieved.

3. Float + negative margin method

Without further ado, let’s go directly to the code:

<p class="main-wrapper">
    <p class="main">主列</p>
</p>
<p class="sidebar">子列</p>

.main-wrapper {   
 float: left;   
 width: 100%;   
}   
.main {   
 height: 100px;   
 margin-left: 210px;   
 background-color: rgba(255, 0, 0, .5);   
}   
.sidebar {   
 float: left;   
 width: 200px;   
 height: 100px;   
 margin-left: -100%;   
 background-color: rgba(0, 255, 0, .5);   
}

Everyone should know It can be seen that this is a double-wing layout, and the main column is displayed first. The implementation process is as follows:

First float the main column and sidebar column, and then correctly position the sidebar column through negative margin.
Nest the main column in a p, and set the width value of p to 100%.
Finally, you can eliminate the part covered by the sidebar by setting the margin-left of the main column.

The above is the detailed content of Share a summary of how to implement CSS two-column layout. For more information, please follow other related articles on the PHP Chinese website!