三列布局之圣杯布局

左右两列固定宽度，中间列自适应宽度，是非常经典的三列布局，应用场景多为中规中矩的管理系统。

要想实现这样的三列布局，可以使用很多种方法，如绝对值法、浮动法、圣杯法、双飞翼法等，本文首先介绍圣杯法。

该方法的主要用到了浮动、相对定位以及负边距。

圣杯法的主要实现步骤如下所示：

1 html标签布局

先使用html标签构建页面的基本结构，主要用到的标签为<header><main><footer><center><aside>等。

并且假定需求为：页面中左栏的宽度为120px，高度200px；右栏的宽度为200px，高度300px；中间栏宽度自适应。

代码如下：

<header></header>
    <main>
        <center class="center">.center</center>
        <aside class="left">.left</aside>
        <aside class="right">.right</aside>
    </main>
<footer></footer>

在这里需要注意的有两点：

1 需要用一个包裹的容器把三列包裹起来，如上述代码中的main标签便充当了这个容器，分别将左中右三栏包裹起来了。

2 三列在基本布局中的位置为：中间栏在最前面，然后分别是左边的列和右边的列。

给标签设置好上述的宽高和背景颜色后，可见页面布局如下图所示：

2 设置内边距

有了基本布局之后，就可以开始使用css代码来构建三列布局了。首先观察页面，中间列的宽度因为需要自适应，所以设置宽度为100%，由上图可见中间列占据了网页那么宽。要想让中间列下面的两列分别跑到中间列的左边和右边，则需要给这两个列腾出两个空间来。所以在这里，需要给main标签，即包裹三列的标签设置左右内边距。左右两边的内边距所占的空间，就是之后左右列要去的地方。所以也不难知道，需要设置的左内边距就为左栏的宽度，120px。相应的，右内边据就为右栏的宽度，200px。css代码如下所示：

main{
    background:#ccccff;
    border:1px solid #999;
    padding:0 200px 0 120px;
}

设置好左右内边距之后，便可以得到下图的布局

 

 可以看出，包裹元素的左右都空出了一段空间，而这段空间就是我们的左列和右列需要去的地方。

3 设置浮动

当空间腾出来之后，就可以着手把左右两列放进去了。所以，接下来就是设置设置浮动，因为三列都是块级元素，通过浮动可以让三列在同一行去。

在这里设置它们均向左移动

代码如下所示：

.left,.center,.right{
    float:left;
}

三列都浮动后，便会脱离文档流，可我们需要包裹元素把三列包裹起来，所以需要避免三列浮动后对父元素，即main造成的影响。在这里就可以使用overflow来清除这种浮动影响，所以需要在给main设置的代码如下：

main{
    background:#ccccff;
    border:1px solid #999;
    padding:0 200px 0 120px;
    overflow: hidden;
}

当给main加上overflow：hidden之后，页面如下所示：

从上图可以看出，左右两列已经在一行了，可是中间列因为占据的宽度为100%，所以不能和左右两列处在一行，即左右两行通过浮动并不能跑到中间列所在的那一行上，因为中间列把那一行的空间独占了。

4 设置负外边距

为了让左右两列去到中间列所在的那一行，还需要做其他的工作。在圣杯法中，就是使用外边距来实现的。具体操作为，让左边列的margin-left:-100%，这样做的原因是因为左边列因为负外边距会移动到浏览器之外，所以会被挤到上一行去，又因为负外边距为100%，即包裹容器的宽度，左列会移动包裹容器这么多，所以自然就到了中间行所在那一列的左边位置。同理，右边列也需要设置负外边距，但是在这里不能设置marin-left：-100%，因为这样一来右边列就会和左边列重合了，我们需要把右边列放在中间列的右边，所以margin-left设置为：margin-left：-200px，这里的-200px是根据右边列的宽度width：200px得到的。

代码如下所示：

.left{
    width:120px;
    height:200px;
    background:#99ff99;
    margin-left: -100%;
}
.right{
    width:200px;
    height:300px;
    background:#ffcc99;
    margin-left: -200px;
}

设置后，可以看见如下的页面：

从上图可以看出，三列到了一行上，并且左右列分别位于中间列的左右两边。但是，因为main设置有左右padding，所以左右列都覆盖了中间列的一部分内容。所以，左右列的位置还需要进一步调整，好让它们能够移动到给它们分配的空间内，即左右内边距的那段空间。

5 相对定位

相对定位可以让元素根据自己之前的位置做出移动，而不会脱离文档流。在这里，为了能让左右列移动到各自的位置上去，便使用了相对定位，让它们根据它们之前的位置进行移动。设置代码如下：

.left{
    width:120px;
    height:200px;
    background:#99ff99;
    margin-left: -100%;
    position: relative;
    right: 120px;
}
.right{
    width:200px;
    height:300px;
    background:#ffcc99;
    margin-left: -200px;
    position: relative;
    left:200px;
}

通过相对定位，分别让左列相对原来的位置向左移动自己的宽度120px那么多的距离，让右列相对原来的位置向右移200px。可看见页面如下：

如此一来，便实现了三列布局。

这个方法也有缺陷，那就是，当窗口缩小到只有左边宽度和右边宽度那么宽的时候，中间列就会消失，为了防止这个情况发生，所以可以对包裹三列的元素设置一个最小的宽度min-width。