CSS_圣杯布局和双飞翼布局

最新推荐文章于 2025-05-13 14:54:28 发布

转载最新推荐文章于 2025-05-13 14:54:28 发布 · 74 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/LinSL/p/7458804.html

本文详细介绍了圣杯布局和双飞翼布局这两种经典的三栏网页布局方式，包括其实现原理及步骤，并提供了完整的HTML和CSS代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

参考：

圣杯布局的来历是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>