三列布局中，左右两列定宽，中间一列自适应是比较常用的一种布局方式。代表性的布局方式有圣杯布局和双飞翼布局。
圣杯布局
下面这些布局都是通过浮动来实现 的，但常常只将三列布局中，左右两列定宽，中间一列自使用看成是圣杯布局。我认为这种观点其实有点狭隘。
单从圣杯布局这个名字来讲，也不是单指三列布局，圣杯并不是三列布局的形象表示，在西方圣杯是指渴求之物。在网页展现时我们渴求之物当然是主内容区域的信息。
圣杯布局就是：将主内容区域首先加载，其次再加载侧边的内容。
先来理解理解一下圣杯布局是如何实现的：
完整代码：
圣杯布局的几种实现方式 头部内容区域自适应左侧边栏固定内容区域自适应右侧边栏固定内容区域自适应左侧边栏固定右侧边栏固定内容区域自适应左侧边栏1固定左侧边栏2固定内容区域自适应右侧边栏1固定右侧边栏2固定
下面分析一下具体每种情况是怎么实现的：
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%，再通过设置自适应元素的父元素左右内边距，将自适应区域左右压缩到合适的宽度，通过设置左右侧边栏的外负边距移动它们的位置，最后进行相对定位，并调整相对位置。