前端开发CSS

圣杯布局和双飞翼布局

CSS, 网页布局

圣杯布局和双飞翼布局都是为了实现三栏布局，两边的黑子宽度固定，中间盒子自适应，其中，中间栏放到文档流前面，保证先行渲染。

需要先了解负边距即负margin的作用，文末其相关的资料链接。

圣杯布局

圣杯布局的出现是来自于a list part上的一篇文章In Search of the Holy Grail。比起双飞翼布局，它的起源不是源于对页面的形象表达。在西方，圣杯是表达“渴求之物”的意思。

思路：

1.HTML结构，分为主内容区域，左边区域和右边区域。注意主内容区域要写在左边区域和右边区域的前面，因为主内容区域要优先渲染。
1
2
3
4
5
<div class="container">
	<div class="main">主内容区域</div>
	<div class="left">左边固定宽度部分</div>
	<div class="right">右边固定宽度部分</div>
</div>
2.将三者都float：left，再加一个position：relative（相対定位后面会用到），高度设为200px（可自己自定义高度），
3.主区域内容宽度设为100%占满：width:100%;。
4.给左边区域一个固定宽度，将其拉到最左边：width:300px; margin-left:-100%;。
5.给右边区域一个固定宽度，将其拉到最右边：width:200px; margin-left:-200px;。

现在的效果如图所示：

可以发现主区域的文字被左边区域覆盖。这个不难解释，我们继续设置:

6. 外围的container区域加上：padding:0 220px 0 320px;
7. 左边区域使用相対定位：left: -200px;，同理右边区域使用相対定位：right: -300px;

最终的样式表

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
.left,
.right,
.main{
	float: left;
	height: 200px;
	position: relative;
}
.container{
	padding: 0 250px 0 350px;
}
.main{
	width: 100%;
	background-color: green;
}
.left {
	width: 300px;
	background-color: red;
	margin-left: -100%;
	left: -320px;
}
.right {
	width: 200px;
	background-color:blue;
	margin-left: -200px;
	right: -220px;
}

最终效果如图所示：

圣杯布局

双飞翼布局

听说双飞翼布局是玉伯提出来的，是对圣杯布局的一种改进。

1. HTML结构，注意和圣杯布局的不同
1
2
3
4
5
6
7
<div class="main">
	<div class="center">
		我是主内容区域
	</div>
</div>
<div class="left">左边固定宽度部分</div>
<div class="right">右边固定宽度部分</div>
2. 将主区域，左边区域和右边区域都float:left。
3.主区域内容宽度设为100%占满：width:100%;。
4.给左边区域一个固定宽度，将其拉到最左边：width:300px; margin-left:-100%;。
5.给右边区域一个固定宽度，将其拉到最右边：width:200px; margin-left:-200px;。

第3步到第5步和圣杯布局一模一样。

6. 发现主区域内容被覆盖，除了使用外围的padding，还可以使用margin。给主区域增加一个内层容器center, center容器设置为margin: 0 320px 0 220px;

最终的样式表：

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
.main,
.left,
.right{
	float: left;
}
.main{
	width: 100%;
}
.left{
	float: left;
	width: 200px;
	background-color: red;
	height: 200px;
	margin-left: -100%
}
.right{
	float: left;
	width: 300px;
	height: 200px;
	background-color: green;
	margin-left: -300px;
}
.center{
	background: blue;
	margin: 0 320px 0 220px;
	height: 200px;
}

最终效果图：

双飞翼布局

总结

  • 其实圣杯布局和双飞翼思路差不多，解决方案大体相同，都是三栏全部float:left浮动，区别在于解决中间栏div的内容不被遮挡上。
  • 圣杯布局是中间栏在添加相对定位，并配合left和right属性，效果上表现为三栏是单独分开的（如果可以看到空隙的话）。
  • 而双飞翼布局是在中间栏的div中嵌套一个div，内容写在嵌套的div里，然后对嵌套的div设置margin-left和margin-right，效果上表现为左右两栏在中间栏的上面，中间栏还是100%宽度，只不过中间栏的内容通过margin的值显示在中间。

参考链接：

  1. CSS布局奇淫巧计之-强大的负边距
  2. 那些年，奇妙的圣杯与双飞翼，还有负边距
  3. CSS布局 – 圣杯布局 & 双飞翼布局
分享到