前言
在上一篇实现了双飞翼布局，这篇来实现一下圣杯布局。圣杯布局和双飞翼实现的效果是一样的，都是三栏布局，两侧栏宽度固定，中间栏自适应并且能在浏览器中优先展示渲染。
圣杯布局
废话不多说，直接上代码吧。
首先，先给出页面结构，在三栏外面套一个容器，如下代码：1
2
3
4
5
6
7<body>
<div class="container">
<div class="center col"></div>
<div class="left col"></div>
<div class="right col"></div>
</div>
</body>
上面就是我们第一步的页面结构，把center写在第一个是为了实现在浏览器优先渲染。
然后，开始写样式，首先给三栏写上基本样式如下,高度都为400px：1
2
3
4
5
6
7
8
9
10
11
12
13
14
15.col{
height:400px;
}
.center{
width:100%;
background:red;
}
.left{
width:200px;
background:green;
}
.right{
width:200px;
background:blue;
}
到这里，我们三栏的基本样式就出来了。此时，三栏并不在一行，那块级元素怎么才能一行显示呢？那就是通过浮动。所以，我们再加上1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16.col{
height: 400px;
float: left;//新增
}
.center{
width: 100%;
background: red;
}
.left{
width: 200px;
background: green;
}
.right{
width: 200px;
background: blue;
}
这时候center的宽度是占满屏幕的，那这样才能让它在中间呢？这时给外层的container加上样式：1
2
3.container {
padding: 0 200px;
}
这时候，已经实现了三栏都在中间，但由于center宽度为100%，左右两栏被挤到了第二行，这时，就需要用上负边距来使三栏在同一行1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21.container {
padding: 0 200px;
}
.col{
height: 400px;
float: left;
}
.center{
width: 100%;
background: red;
}
.left{
width: 200px;
background: green;
margin-left: -100%; // 新增
}
.right{
width: 200px;
background: blue;
margin-left: -200px; // 新增
}
到这里，三栏已经在同一行了，但三栏现在都是在中间，怎么让左右两栏位于两侧呢？这时我们就需要给左右两栏加上相对定位来改变他们自身的位置：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.container {
padding: 0 200px;
}
.col{
height: 400px;
float: left;
}
.center{
width: 100%;
background: red;
}
.left{
width: 200px;
background: green;
margin-left: -100%;
position: relative; // 新增
left: -200px; // 新增
}
.right{
width: 200px;
background: blue;
margin-left: -200px;
position: relative; // 新增
left: 200px; // 新增
}
至此，我们就实现了圣杯布局！