圣杯布局和双飞翼布局

圣杯布局&双飞翼布局

我们能够发现，其实圣杯布局和双飞翼布局非常相像。因为圣杯布局是阿里巴巴的玉伯（Sea.js的创始人）根据圣杯布局来改造的。用于两边的子面板固定，中间区域自适应的布局。

圣杯布局存在一个缺点：就是当我们的 .middle 设置的宽度比两边小的时候，布局就会乱掉。双飞翼在中间的区域添加了一个子节点，给父节点添加margin属性来左右面板留出空间。用margin来撑开空间。

所以综合起来，双飞翼布局和圣杯布局的区别在于：

  • 双飞翼布局给主面板添加了一个父标签用来通过margin给子面板腾出空间。
  • 双飞翼布局不用设置相对布局，以及对应的left和right值。

当然，基于float布局的圣杯布局和双飞翼布局都有自己的缺陷，当前的趋势是flex和grid布局，代码更少更加灵活。圣杯布局对于我们对CSS的理解和布局的理解还是有帮助的。

圣杯布局和双飞翼布局的源码

圣杯布局的源码

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>圣杯布局</title>
 6     <style>
 7         body,header,div,h4,footer{
 8             margin: 0;
 9             padding: 0;
10             text-align: center;
11         }
12         header{
13             width: 100%;
14             height: 50px;
15             background-color: red;
16         }
17         .container{
18             height: 200px;
19             overflow: hidden;
20             padding: 0 200px;    /*利用和下面的.left{position: relative;left:-200px;}
21             以及.right{position: relative;right:-200px;}来避免中间的内容区被缩放时的左右div给覆盖*/
22         }
23         .middle{
24             width: 100%;
25             height: 200px;
26             background-color: #ECECEC;
27             float: left;
28         }
29         .left{
30             width: 200px;
31             height: 200px;
32             position: relative;
33             left: -200px;
34             margin-left: -100%;    /*紧贴左边*/
35             background-color: blue;
36             float: left;
37         }
38         .right{
39             width: 200px;
40             height: 200px;
41             position: relative;
42             right: -200px;
43             margin-left: -200px;    /*紧贴右边*/
44             background-color: yellow;
45             float: left;
46         }
47         footer{
48             width: 100%;
49             height: 50px;
50             background-color: black;
51         }
52     </style>
53 </head>
54 <body>
55     <header><h4>内容区</h4></header>
56     <div class="container">
57         <div class="middle"><h4>中间弹性区</h4></div>
58         <div class="left"><h4>左边栏</h4></div>
59         <div class="right"><h4>右边栏</h4></div>
60     </div>
61     <footer><h4>footer内容区</h4></footer>
62 </body>
63 </html>

双飞翼布局的源码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>双飞翼布局</title>
    <style>
        body,header,div,h4,footer{
            margin: 0;
            padding: 0;
            text-align: center;
        }
        header{
            width: 100%;
            height: 50px;
            background-color: red;
        }
        .container{
            height: 200px;
            overflow: hidden;
        }
        .middle{
            width: 100%;
            height: 200px;
            background-color: #ECECEC;
            float: left;
        }
        .in{
            padding: 0 200px 0 200px;
        }
        .left{
            width: 200px;
            height: 200px;
            margin-left: -100%;    /*紧贴左边*/
            background-color: blue;
            float: left;
        }
        .right{
            width: 200px;
            height: 200px;
            margin-left: -200px;    /*紧贴右边*/
            background-color: yellow;
            float: left;
        }
        footer{
            width: 100%;
            height: 50px;
            background-color: black;
        }
    </style>
</head>
<body>
    <header><h4>内容区</h4></header>
    <div class="container">
        <div class="middle"><div class="in"><h4>中间弹性区</h4></div></div>
        <div class="left"><h4>左边栏</h4></div>
        <div class="right"><h4>右边栏</h4></div>
    </div>
    <footer><h4>footer内容区</h4></footer>
</body>
</html>