Front three-column layout

        In front-end development, three-column layout is a very basic scenario. This article summarizes the methods and advantages and disadvantages of implementing three-column layout, as well as some layout methods related to three-column layout.

        The requirements for the three-column layout are generally:

              1. The width of the left and right sides is fixed, and the middle width is adaptive.

              2. The contents of the middle column can be displayed completely.

      This situation can be achieved with positioning and floating.

        1. Use positioning. The use of positioning is mainly to position the left and right columns to the left and right sides by the absolute positioning offset.

#middle { 
 background: deeppink; 
 padding: 0 200px; // This sentence must be added, otherwise part of the content of the middle column will be covered by the left column 
} 
#left { 
 position: absolute; 
 left: 0; 
 top: 0; 
 width: 200px; 
 background: pink; 
} 
#right { 
 position: absolute; 
 right: 0; 
 top: 0; 
 width: 200px; 
 background: pink; 
}

effect:

 2. Use floating. In this case, you don't need to set padding for the middle column, the content can be completely displayed. Because floating only raises the half-level, when the left and right elements are floating, the following elements will be topped up. Since only the half-level is raised, only the lower half of the following elements will be lifted, and the upper half will not The upper half of an element is related to the text, and the lower half is related to the model. Therefore, the middle column can be completely displayed without setting other styles for the middle.

Note: When using floating, the DOM element corresponding to middle should be at the bottom.

#left,#right{
 width: 200px;
 background: pink;
}
#left{
 float: left;
}
#right{
 float: right;
}
#middle{
 background: deeppink;
}

effect:

 

Problems in two cases: 1. When positioning is used to reduce the window, problems will occur (related to the included block of positioning); 

                              2. When using floating, because the middle column corresponds to the DOM element at the end of the HTML structure, because it is also loaded last, it may affect the user experience;

                              3. Both methods have a common problem, that is, when the height of one of the columns changes, the other two columns will not change accordingly, and the visual effect is particularly ugly;

In response to the above problems, corresponding layout solutions have also appeared to solve these problems:

1. Pseudo-contour layout, this layout method realizes the contour layout visually, but it is not actually a contour layout;

#wrap{
 width: 750px;
 border: 1px solid;
 margin: 0 auto;
 overflow: hidden;
}
#wrap .left{
 float: left;
 width: 200px;
 background: pink;
 padding-bottom: 1000px;
 margin-bottom: -1000px;
}
#wrap .right{
 float: left;
 width: 500px;
 background: deeppink;
 padding-bottom: 1000px;
 margin-bottom: -1000px;
}
.clearfix{
 *zoom: 1;
}
.clearfix:after{
 content: "";
 display: block;
 clear: both;
}

 

2. The layout of the Holy Grail to realize that the middle column is loaded first;

 

 

#content{
 overflow: hidden;
 padding: 0 200px;
}
#header,#footer{
 height: 20px;
 text-align: center;
 border: 1px solid  deeppink;
 background: gray;
}
#content .middle,#content .left,#content .right{
 padding-bottom: 10000px;
 margin-bottom: -10000px;
}
#content .middle{
 float: left;
 width: 100%;
 background: pink;
 /*padding: 0 200px;*/
}
#content .left{
 position: relative;
 left: -200px;
 margin-left: -100%;
 float: left;
 width: 200px;
 background: yellow;
}
#content .right{
 position: relative;
 right: -200px;
 margin-left: -200px;
 float: left;
 width: 200px;
 background: yellow;
}
.clearfix{
 *zoom: 1;
}
.clearfix:after{
 content: "";
 display: block;
 clear: both;
}

3. The dual-wing layout is also the first to load the middle column

 

#header,#footer{
 border: 1px solid;
 background: gray;
 text-align: center;
}
#content .middle,#content .left,#content .right{
 height: 50px;
 line-height: 50px;
 float: left;
}

/*双飞翼布局*/
#content{
 overflow: hidden;
}
#content .middle{
 width: 100%;
 background: deeppink;
}
#content .middle .m_inner{
 padding: 0 200px;
}
#content .left,#content .right{
 background: pink;
 width: 200px;
 text-align: center;
}
#content .left{
 margin-left: -100%;
}
#content .right{
 margin-left: -200px;
}