Examples of four methods to implement three-column layout with CSS

Preface

In fact, whether it is a three-column layout or a two-column layout, we often use it in our daily projects. Maybe you don’t know what three-column layout is. Column layout What is two-column layout but it is already in use? Maybe you know one or two methods of three-column layout, but in actual operation you will only rely on that one method. This article introduces the three-column layout in detail Four methods and introduce its usage scenarios.

The so-called three-column layout refers to a layout method in which the page is divided into three parts: left, middle and right, and then the middle part is adapted.

1. Absolute positioning method

The HTML code is as follows:

<p class="left">Left</p>
<p class="main">Main</p>
<p class="right">Right</p>

CSS code is as follows:

//简单的进行CSS reset
body,html{
    height:100%;
    padding: 0px;
    margin:0px;
}
//左右绝对定位
.left,.right{
    position: absolute;
    top:0px;
    background: red;
    height:100%;
}
.left{
    left:0;
    width:100px;
}
.right{
    right:0px;
    width:200px;
}
//中间使用margin空出左右元素所占据的空间
.main{
    margin:0px 200px 0px 100px;
    height:100%;
    background: blue;
}

This method has an obvious shortcoming, that is, if the middle column contains a minimum width limit, or For internal elements that contain width, when the browser width is small to a certain extent, layer overlap will occur.

2. Holy Grail Layout

The HTML code is as follows:

//注意元素次序
<p class="main">Main</p>
<p class="left">Left</p>
<p class="right">Right</p>

CSS code is as follows:

//习惯性的CSS reset
body,html{
    height:100%;
    padding: 0;
    margin: 0
}
//父元素body空出左右栏位
body {
    padding-left: 100px;
    padding-right: 200px;
}
//左边元素更改
.left {
    background: red;
    width: 100px;
    float: left;
    margin-left: -100%;
    position: relative;
    left: -100px;
    height: 100%;
}
//中间部分
.main {
    background: blue;
    width: 100%;
    height: 100%;
    float: left;
}
//右边元素定义
.right {
    background: red;
    width: 200px;
    height: 100%;
    float: left;
    margin-left: -200px;
    position: relative;
    right: -200px;
}

The relevant explanation is as follows:

## ( 1) The middle part needs to change according to the change of the browser width, so 100% is used. Here, the left, middle and right are set to float to the left. Because the middle part is 100%, the left and right layers have no position at all

(2) After losing 100 on the left layer, I found that the left is up, because there is no place to lose the window, you can only move up

(3) Press the second step of this method. , it can be concluded that it only needs to move the width of the window to reach the far left. Use negative margins to position the left and right columns

(4) But because the left and right columns block the middle part, so Using the relative positioning method, each moves itself relative to itself to obtain the final result

3. Double flying wing layout

HTML code is as follows:

<p class="main">
    <p class="inner">
        Main
    </p>
</p>
<p class="left">Left</p>
<p class="right">Right</p>

CSS code is as follows:

//CSS reset
body,html {
    height:100%;
    padding: 0;
    margin: 0
}
body {
    /*padding-left:100px;*/
    /*padding-right:200px;*/
}
.left {
    background: red;
    width: 100px;
    float: left;
    margin-left: -100%;
    height: 100%;
    /*position: relative;*/
    /*left:-100px;*/
}
.main {
    background: blue;
    width: 100%;
    float: left;
    height: 100%;
}
.right {
    background: red;
    width: 200px;
    float: left;
    margin-left: -200px;
    height: 100%;
    /*position:relative;*/
    /*right:-200px;*/
}
//新增inner元素
.inner {
    margin-left: 100px;
    margin-right: 200px;
}

Holy Grail Layout In fact, it seems to be complicated and not very maintainable in the later stage. After discussions with Taobao UED, a new layout method came out, which is the double flying wing layout. The code is as above. Adding one more p eliminates the need for relative layout and only uses floating and negative margins. Differences from the Holy Grail layout have been noted.

4. Floating

HTML code is as follows:

//注意元素次序
<p class="left">Left</p>
<p class="right">Right</p>
<p class="main">Main</p>

CSS code is as follows:

//CSS reset
body,html {
    height:100%;
    padding: 0;
    margin: 0
}
//左栏左浮动
.left {
    background: red;
    width: 100px;
    float: left;
    height: 100%;
}
//中间自适应
.main {
    background: blue;
    height: 100%;
    margin:0px 200px 0px 100px;
}
//右栏右浮动
.right {
    background: red;
    width: 200px;
    float: right;
    height: 100%;
}

This method of code is concise and efficient enough, and easy to understand

More CSS For related articles on examples of four methods to achieve three-column layout, please pay attention to the PHP Chinese website!