圣杯布局和双飞翼布局

圣杯布局&双飞翼布局

我们能够发现,其实圣杯布局和双飞翼布局非常相像。因为圣杯布局是阿里巴巴的玉伯(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>