CSS has several ways to implement a three-column layout

This time I will bring you several ways to implement a three-column layout using CSS. What are the precautions for implementing a three-column layout using CSS? The following is a practical case, let’s take a look.

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 is three-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 columns in detail. Four methods of column layout 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 positioningMethod

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 an internal element containing width, when the browser width is small enough, layer overlap will occur.

2. Holy Grail Layout

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 explanations are 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 layer and the right layer have no position at all

(2) After minus 100 of the left layer margin, I found that left has gone up, because it is so negative that there is no position when the window exits, so I can only move it up

(3) According to the second step, it can be concluded that it only needs to move the window width to be as wide as the leftmost one. Use negative margins to position the left and right columns

(4) But because the left and right The column blocked the middle part, so the relative positioning method was used, each moved out relative to itself, and the final result was obtained

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;
}

The holy grail layout actually looks complicated and the post-maintenance is not very high. After discussion with Taobao UED, it came out A new layout method 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 The code of this method is concise and efficient enough, and easy to understand

Summary

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Use HTML+CSS to implement drop-down menu

Use CSS3 to implement luminous square border
CSS makes the icon rotate when the mouse moves up

The above is the detailed content of CSS has several ways to implement a three-column layout. For more information, please follow other related articles on the PHP Chinese website!