Shulou(Shulou.com)06/03 Report--

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.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.