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

This article introduces how to use the three-column formula of CSS. The content is very detailed. Interested friends can use it for reference. I hope it will be helpful to you.

The structure of DOM is as follows:

XML/HTML Code copies content to the clipboard

Process explanation

Next, let's realize the layout of the Grail step by step.

1. First, float the main, sub and extra columns respectively, and then use the negative outer margin to locate the sub column and the extra column to the left and right sides. The CSS code at this time is as follows:

CSS Code copies content to the clipboard

.main {float: left; width: 100%; height: 300px; background-color: rgba (255,0,0, .5);} .sub {float: left; width: 200px; height: 300px; margin-left:-100%; background-color: rgba (0,255,0, .5);}. Float: left; width: 180px; height: 300px Margin-left:-180px; background-color: rgba (0,0,255,0.5);}

2. After completing the previous step, the sub and extra columns have reached the correct position, but the sub and extra columns cover both sides of the main. For this problem, the solution to the Grail layout is to add the left and right inner margins to the container container so that the main column is located in the correct position.

CSS Code copies content to the clipboard

.container {padding-left: 210px; padding-right: 190px;}

3. After completing the second step, there is a new problem: the positions of sub and extra columns are also moved by the left and right margins of the container. To solve this problem, the Grail layout uses relative positioning to bring the sub and extra columns back to the correct position. The new code is as follows:

CSS Code copies content to the clipboard

.sub {position: relative; left:-210px;} .position {position: relative; rightright:-190px;}

4. When the browser shrinks to a certain extent, the layout may be destroyed, which can be solved by adding min-width attribute on body. The final Grail layout CSS code is as follows:

CSS Code copies content to the clipboard

Body {min-width: 600px; / * 2*sub + extra * /} .container {padding-left: 210px; padding-right: 190px;} .main {float: left; width: 100%; height: 300px; background-color: rgba (255,0,0, .5);} .sub {position: relative; left:-210px; float: left; width: 200px; height: 300px Margin-left:-100%; background-color: rgba (0,255,0, .5);}. Position: relative; rightright:-190px; float: left; width: 180px; height: 300px; margin-left:-180px; background-color: rgba (0,0,255,.5);}

Click to view online demo

Complete instance

The effect is as follows:

The CSS and DOM codes are as follows:

CSS Code copies content to the clipboard

Holy Grail layout body {background-color: # ffffff; font-size:14px;} # hd, # ft {padding:20px 3px; background-color: # cccccc; text-align: center;} .bd-lft, .bd-rgt, .bd-3-lr, .bd-3-ll, .bd-3-rr {margin:10px 0; min-width:400px;} .main {background-color: # 03a9f4; color:#ffffff } .aside, .aside-1, .aside-2 {background-color: # 00bcd4; color:#ffffff;} p {margin:0; padding:20px; text-align: center;} / * left column fixed width, right adaptive * / .bd-lft {zoom:1; overflow:hidden; padding-left:210px } .bd-lft .aside {float:left; width:200px; margin-left:-100%; / * =-100% left / position:relative; left:-210px; / * =-parantNode.paddingLeft * / _ left: 0; / * IE6 hack*/} .bd-lft .main {float:left Width:100%;} / * right column fixed width, left adaptive * / .bd-rgt {zoom:1; overflow:hidden; padding-right:210px;} .bd-rgt .aside {float:left; width:200px; margin-left:-200px / * =-this.width * / position:relative; rightright:-210px; / * =-parantNode.paddingRight * /}. Bd-rgt .main {float:left; width:100%;} / * Adaptive left, middle and right columns * / .bd-3-lr {zoom:1; overflow:hidden Padding-left:210px; padding-right:210px;} .bd-3-lr .main {float:left; width:100%;} .bd-3-lr .aside-1 {float:left; width:200px; margin-left:-100%; position:relative; left:-210px _ left: 210px; / * IE6 hack*/} .bd-3-lr .aside-2 {float: left; width:200px; margin-left:-200px; position:relative; rightright:-210px } / * are on the left and adaptive on the right * / .bd-3-ll {zoom:1; overflow:hidden; padding-left:420px;} .bd-3-ll .main {float:left; width:100%;} .bd-3-ll .aside-1 {float:left Width:200px; margin-left:-100%; position:relative; left:-420px; _ left: 0px; / * IE6 hack*/} .bd-3-ll .aside-2 {float: left; width:200px; margin-left:-100%; position:relative Left:-210px; _ left: 210px; / * IE6 hack*/} / * are all on the right, and adaptive on the left * / .bd-3-rr {zoom:1; overflow:hidden; padding-right:420px;} .bd-3-rr .main {float:left; width:100% } .bd-3-rr .aside-1 {float: left; width:200px; margin-left:-200px; position:relative; rightright:-210px;} .bd-3-rr .aside-2 {float: left; width:200px; margin-left:-200px Position:relative; rightright:-420px;} header

Adaptive width of main content bar

Fixed width of sidebar

Adaptive width of main content bar

Fixed width of sidebar

Adaptive width of main content bar

Sidebar 1 fixed width

Sidebar 2 fixed width

Adaptive width of main content bar

Sidebar 1 fixed width

Sidebar 2 fixed width

Adaptive width of main content bar

Sidebar 1 fixed width

Sidebar 2 fixed width

Bottom

The advantages of the Grail layout are summarized as follows:

1. Load the main content column first.

two。 Any column is allowed to be the highest.

3. There is no extra div.

4. Very little hack is required.

On how to use the three-column formula of CSS to share here, I hope that 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.