圣杯布局和双飞翼布局

圣杯布局&双飞翼布局

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

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

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

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

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

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

圣杯布局的源码

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

双飞翼布局的源码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<!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>