An example of the Holy Grail layout and the double-wing layout for CSS layouts

The Holy Grail layout and the two-wing layout of the implementation, the purpose is left and right two columns fixed width, the middle part of adaptive. Next through this tutorial to introduce the CSS layout of the Holy Grail layout and the two-wing layout, interested friends learn together

According to my understanding, in fact, the Holy Grail layout and the two-wing layout of the implementation, the purpose is left and right two columns fixed width, the middle part of self-adaptation.
Holy Grail Layout

Implementation principle
In the HTML code, the middle section is first placed in the front of the container, and then the Left,right
1. Set all three Float:left, position:relative (because the relative positioning will be used later)
2.middle setting width:100% fills a line
3. Middle occupies a full line at this time, so to pull left to the leftmost middle row, use margin-left:-100%
4. Then left to pull back to the left side of the middle line, but will cover middle content of the ieft end, to the middle content to pull out, so in the peripheral container plus padding:0 210px
5.middle content pulled out, but left also followed out, so to restore, the left to use relative positioning left:-210px
6. In the same vein, right is pulled to the rightmost side of the middle row, using margin-left:-210px,right:-210px
Implementation code

<! DOCTYPE html> 

Dual Wing layout


Implementation principle
In the HTML code, the middle section is first placed in the front of the container, and then the Left,right
1. Set all three to Float:left
2.middle setting width:100% fills a line
3. Middle occupies a full line at this time, so to pull left to the middle row of the leftmost, using margin-left:-100%, similarly right use margin-left:-200px
4. At this time middle content is overwritten, to pull out the contents of middle, in addition to using the peripheral container padding, you can also consider using margin, add an inner layer P-middle to middle_content, and then set margin:0 210px
Implementation code

<! DOCTYPE html> 



About the CSS layout of the Holy Grail layout and the two-wing layout of the relevant knowledge to introduce so much, we hope to help!