三列布局中，左右两列定宽，中间一列自适应是比较常用的一种布局方式。代表性的布局方式有圣杯布局和双飞翼布局。
圣杯布局
下面这些布局都是通过浮动来实现 的，但常常只将三列布局中，左右两列定宽，中间一列自使用看成是圣杯布局。我认为这种观点其实有点狭隘。
单从圣杯布局这个名字来讲，也不是单指三列布局，圣杯并不是三列布局的形象表示，在西方圣杯是指渴求之物。在网页展现时我们渴求之物当然是主内容区域的信息。
圣杯布局就是：将主内容区域首先加载，其次再加载侧边的内容。
先来理解理解一下圣杯布局是如何实现的：
完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圣杯布局的几种实现方式</title>
<style>
*{
margin:0;
padding:0;
}
body{
min-width: 600px;
color:#fff;
}
.header,
.footer{
text-align: center;
background-color: #ab96c5;
}
.layout1,
.layout2,
.layout3,
.layout4,
.layout5{
margin:5px;
overflow: hidden;
}
.content,
.aside{
min-height: 40px;
text-align:center;
}
.content{
/*position: relative;*/
background-color: #793d56;
width: 100%;
}
.aside{
position: relative;
background-color: #bb1c33;
width:200px;
}
.layout1{
padding-left: 200px;
}
#aside1,
#content1{
float: left;
}
#aside1{
margin-left: -100%;
left: -200px;
}
#content2,
#aside2{
float:left;
}
.layout2{
padding-right: 200px;
}
#aside2{
margin-left: -200px;
right: -200px;
}
.layout3{
padding-left: 200px;
padding-right: 200px;
}
#content3,
#aside3-left,
#aside3-right{
float:left;
}
#aside3-left{
margin-left: -100%;
left: -200px;
}
#aside3-right{
margin-left: -200px;
right: -200px;
}
.layout4{
padding-left: 400px;
}
#content4,
#aside4-left1,
#aside4-left2{
float: left;
}
#aside4-left1{
margin-left: -100%;
left: -400px;
}
#aside4-left2{
margin-left:-100%;
left: -200px;
}
.layout5{
padding-right: 400px;
}
#content5,
#aside5-right1,
#aside5-right2{
float: left;
}
#aside5-right1{
margin-left: -200px;
right: -200px;
}
#aside5-right2{
margin-left:-200px;
right: -400px;
}
</style>
</head>
<body>
<div class="header">头部</div>
<div class="layout1">
<div class="content" id="content1">内容区域自适应</div>
<div class="aside" id="aside1">左侧边栏固定</div>
</div>
<div class="layout2">
<div class="content" id="content2">内容区域自适应</div>
<div class="aside" id="aside2">右侧边栏固定</div>
</div>
<div class="layout3">
<div class="content" id="content3">内容区域自适应</div>
<div class="aside" id="aside3-left">左侧边栏固定</div>
<div class="aside" id="aside3-right">右侧边栏固定</div>
</div>
<div class="layout4">
<div class="content" id="content4">内容区域自适应</div>
<div class="aside" id="aside4-left1">左侧边栏1固定</div>
<div class="aside" id="aside4-left2">左侧边栏2固定</div>
</div>
<div class="layout5">
<div class="content" id="content5">内容区域自适应</div>
<div class="aside" id="aside5-right1">右侧边栏1固定</div>
<div class="aside" id="aside5-right2">右侧边栏2固定</div>
</div>
<div class="footer">尾部</div>
</body>
</html>
下面分析一下具体每种情况是怎么实现的：
1. 左侧边栏固定，右侧内容区域自适应
实现代码：
.content,
.aside{
min-height: 40px;
text-align:center;
}
.layout1{
margin:5px;
}
.content{
background-color: #793d56;
width: 100%;
}
.aside{
position: relative;
background-color: #bb1c33;
width:200px;
}
.layout1{
color:#fff;
padding-left: 200px;
}
#aside1,
#content1{
float: left;
}
#aside1{
margin-left: -100%;
left: -200px;
}
代码分析：
a.设置 aside和content的最小高度，min-height: 40px；
b.设置 aside和content的背景，将文本颜色设置为白色，方便观察；
c.设置给aside设置一个固定的宽度，width:200px;为了让剩下的被content充满，将它的width设置为：width: 100%;
d.让内容和侧边栏都发生左浮动（似乎什么也没有发生）；
e.设置aside1完全相等于内容区域的左外负边距，margin-left: -100%;
当设置
#aside1{
margin-left: -100%;
}
时，aside1的右负边距正好为content的width即：100%；
3D效果：
这时，左侧边栏被移到想放置的位置了，但是发现content区域的文字被侧边栏遮挡住了，需要通过设置父元素的padding-left把内容区域拉出来：
f. 设置layout的padding-left: 200px;
这时，发现左侧边栏又跟着被拉出来了。需要将侧边栏移动到本来的位置：最左边。
g. 设置aside的left: -200px;
通过设置aside1的left:-200px；相当于将aisde1相对于当前位置像右移动-200px；其实就是向左移动200px;但是发现什么也没有发生。
这是因为，aisde1不知道相对于什么位置来定位自己，需要设置定位方式：aside的position属性为position: relative；
这下左侧边栏回到了应该在的位置。
h.将文本居中：
3D效果：
发现这下显示正常了。
——————————————————————————————————————————————————————————————————————————————————————————————————————
2. 右侧边栏固定，左侧内容区域自适应
这其实和上面的左侧边栏固定，右侧内容区域自适应是一个道理，只是有些设置不一样。
.content,
.aside{
min-height: 40px;
text-align:center;
}
.layout2{
margin:5px;
}
.content{
background-color: #793d56;
width: 100%;
}
.aside{
position: relative;
background-color: #bb1c33;
width:200px;
}
.layout2{
padding-right: 200px;
color: #fff;
}
#content2,
#aside2{
float:left;
}
#aside2{
margin-left: -200px;
right: -200px;
}
3. 两侧边栏固定，中间栏自适应。
.content,
.aside{
min-height: 40px;
text-align:center;
}
.content{
background-color: #793d56;
width: 100%;
}
.aside{
position: relative;
background-color: #bb1c33;
width:200px;
}
.layout3{
padding-left: 200px;
padding-right: 200px;
color: #fff;
}
#content3,
#aside3-left,
#aside3-right{
float:left;
}
#aside3-left{
margin-left: -100%;
left: -200px;
}
#aside3-right{
margin-left: -200px;
right: -200px;
}
看一下具体的实现：
a. 首先让左右侧栏和中栏内容栏即三个div都左浮动：
b. 先把左侧边栏拉上去
向上面设置1时一样，设置#aside3-left的margin-left: -100%;
3D效果：
这时，发现内容左侧的文本被遮挡，通过设置父元素layout3的padding-left可以将content内容拉出来：
c. 设置layout3的padding-left：200px;
但是左侧边栏也跟着跑过来了，需要将左侧边栏向左移动。
d.设置#aside3-left的left：-200px;即相对于当前位置向左移动200px;
缺少相对定位，没有效果。
e. 设置#aside3-left的position：relative；
左侧边栏设置成功。接下啦拉动右侧边栏。
f.将右侧边栏拉拉上来：
设置右侧边栏#aside3-right的margin-left: -200px;
此时内容区域有一部分被右侧边栏遮盖住了：（点击内容区域，发现右侧边栏也会被选定）
g.但同时跟左侧边栏一样，应该把content区域从左侧边栏拉出来：
h.设置右侧边栏为相对定位，将右侧边栏向右移动，放回原位。
得到最终想要的结果。
后面的两种布局方式是一样的原理，这里就不再赘述了。
————————————————————————————————————————————————————————————————————————————————————————————————————————
总结：
圣杯布局：用到浮动、负边距、相对定位，不添加额外标签。
首先让布局元素都浮动起来，然后将自适应区域设置为100%，再通过设置自适应元素的父元素左右内边距，将自适应区域左右压缩到合适的宽度，通过设置左右侧边栏的外负边距移动它们的位置，最后进行相对定位，并调整相对位置。