How to realize the Holy Grail layout and double Flying Wing layout in CSS layout
This article will explain in detail how to achieve the Holy Grail layout and double flying wing layout in the CSS layout. The content of the article is of high quality, so the editor shares it for you to do a reference. I hope you will have a certain understanding of the relevant knowledge after reading this article.
According to my understanding, in fact, the realization of the Grail layout and the double wing layout is the fixed width of the left and right columns, and the middle part is self-adaptive.
Holy Grail layout
Realization principle
In the html code, the middle part is first placed at the front of the container, followed by the left,right
1. Set all three to float:left and position:relative (because relative positioning will be used later)
2.middle setting width:100% occupies a full row
3. At this point, middle occupies a full line, so to pull left to the leftmost line of middle, use margin-left:-100%
4. At this point, the left pulls back to the leftmost line of the middle, but it overwrites the left end of the middle content. To pull the middle content out, add padding:0 210px to the outer container.
The 5.middle content is pulled out, but the left also comes out, so to restore, use the relative positioning left:-210px for the left
6. By the same token, right pulls to the far right of the line in middle, using margin-left:-210px,right:-210px
Implementation code
JavaScript Code copies content to the clipboard
Holy Grail layout body {text-align: center;;} # demo {margin: auto;} # header, # footer {height: 50px; background-color: # aaa;} # container {overflow: hidden; margin: 10px 0; padding:0 210px;} # left {background-color: red; float:left; position:relative; left:-210px; width:200px Margin-left:-100%;} # right {background-color: green; width: 200px; margin-left:- 200px; float:left; right:-210px; position: relative;} # middle {background-color: blue; float:left; width:100%;} header middle
Main content area left
Left sidebar area right
Bottom of the right sidebar area
Double wing layout
Realization principle
In the html code, the middle part is first placed at the front of the container, followed by the left,right
1. Set all three to float:left
2.middle setting width:100% occupies a full row
3. At this point, middle occupies a full line, so pull left to the leftmost line of middle, and use margin-left:-100%, in the same way that right uses margin-left:-200px
4. At this point, the content of the middle is overwritten. To pull out the content of the middle, in addition to using the padding of the peripheral container, you can also consider using margin, adding an inner div-- middle_content to the middle, and then setting the margin:0 210px.
Implementation code
JavaScript Code copies content to the clipboard
Double wing configuration body {text-align: center;;} # header, # footer {height: 50px; background-color: # aaa;} # container {overflow: hidden; margin: 10px 0;} # left {background-color: red; float:left; width:200px; margin-left:-100%;} # right {background-color: green; width:200px Float: left; margin-left:-200px;} # middle {float: left; width: 100%;} # middle_content {background-color: blue; margin: 0210px;} header middle_content
Main content area left
Left sidebar area right
The bottom of the right sidebar area on how to achieve the Holy Grail layout and double flying wing layout in the CSS layout is shared here, I hope the above content can be of some help to you, can learn more knowledge. If you think the article is good, you can share it for more people to see.
