首页 > > 网页制作 > css >

圣杯布局和双飞翼布局

2018-06-24 01:47:58来源：未知阅读 ()

参考：

圣杯布局的来历是2006年发在a list part上的这篇文章：
http://alistapart.com/article/holygrail
双飞翼布局介绍-始于淘宝UED：
http://www.imooc.com/wenda/detail/254035

博客：http://www.cnblogs.com/imwtr/p/4441741.html

理解：

　　圣杯布局和双飞翼布局均可以实现一个三栏布局：中间栏先加载，然后是左栏，右栏；左右两栏宽度固定，中间栏宽度自适应（会根据浏览器的窗口的大小而变化。）

圣杯布局实现原理：

（1）定义一个div，class为container容器，包含以下三个div，分别表示main（中间栏），left（左栏），right（右栏），注意：div的顺序分别是main，left，right，因为根据HTML文档的加载原理，写在前面的先加载到，所以要把main写在最前面。

（2）让main ，left， right都左浮动。

（2）定义高度。

（3）定义宽度：main为100%，left和right可以为一个固定的宽度，eg：300px；

（4）由于main的宽度有100%，所以会left和right会被挤到下面。

　　 此时需要定义左栏left浮动到最左边：margin-left : -100%；同理定义右栏浮动到最右边：margin-left：-300px；

（5）通过以上四步，实现了三栏，中间自适应布局，但是由于main的宽度是100%，此时main中的内容是会被left和right遮挡住的。

　　因此需要为container容器定义padding-left和padding-right，宽度分别为left和right的宽度，但是这样会导致left和right也会更着过来，不再是在浏览器窗口的最左端和最右端，如下图所示：（红色画圈部分为设置的padding，这里还是会遮挡住main的内容。）

（6）对left和right进行相对定位：分别是：left：-300px；right：-300px；使其回到浏览器的最左端和最右端。自此，完成，main的内容也不会被遮挡了。

1.圣杯布局（完整代码）

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>圣杯布局</title>
 6     <style type="text/css">
 7         *{
 8             margin: 0;
 9             padding: 0;
10         }
11         body{
12             min-width: 700px;
13         }
14         .clearfloat:after{
15             display: block;
16             clear:both;
17             content: "";
18             visibility: hidden;
19             height: 0;
20         }
21         .container{
22             overflow: hidden;
23             padding: 0 300px;
24         }
25         .col{
26             position: relative;
27             height: 700px;
28             float: left;
29             color: #fff;
30         }
31         .left,.right{
32             width: 300px;
33             background-color: #3b3b3b;
34         }
35         .main{
36             width: 100%;
37             background-color: #b3b3b3;
38         }
39         .left{
40             margin-left: -100%;
41             left: -300px;
42         }
43         .right{
44             margin-left:-300px;
45             right: -300px;
46         }
47 
48 
49     </style>
50 </head>
51 <body>
52     <div class="container .clearfloat">
53         <div class="main col">main</div>
54         <div class="left col">left</div>
55         <div class="right col">right</div>
56     </div>
57 </body>
58 </html>

双飞翼布局实现原理：

　　双飞翼布局的前四步和圣杯布局是相同的，只是在处理main内容被遮挡的方法不同：双飞翼布局采用的方法是为main加一个div的遮罩，为这个遮罩设置margin-left和margin-right，左栏和和右栏宽度都为300px的div，遮罩可以这样设置：margin：0 300px;

2.双飞翼布局（完整代码）

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>双飞翼</title>
 6     <style type="text/css">
 7         *{
 8             margin: 0;
 9             padding: 0;
10         }
11         body{
12             min-width: 700px;
13         }
14         .clearfloat:after{
15             display: block;
16             clear:both;
17             content: "";
18             visibility: hidden;
19             height: 0;
20         }
21         .col{
22             height: 700px;
23             float: left;
24             color: #fff;
25         }
26         .left,.right{
27             width: 300px;
28             background-color: #3b3b3b;
29         }
30         .main{
31             width: 100%;
32             background-color: #b3b3b3;
33         }
34         .main-wrap{
35             margin: 0 300px;
36         }
37         .left{
38             margin-left: -100%;
39         }
40         .right{
41             margin-left: -300px;
42         }
43     </style>
44 </head>
45 <body>
46     <div class="container .clearfloat">
47         <div class="main col">
48             <div class="main-wrap">
49                 main
50             </div>
51         </div>
52         <div class="left col">left</div>
53         <div class="right col">right</div>
54     </div>
55 </body>
56 </html>