本文已参与「新人创作礼」活动，一起开启掘金创作之路。

引言

三列布局是CSS中非常经典的一种布局方式，在浏览网页时我们常常会和它打照面，那么我们要如何来简单地编写一个三列布局呢？接下来我们来探讨一下圣杯布局及双飞翼布局。

像上面显示的微博界面，就是一个三列布局界面，该界面分为三部分，中间展示主题内容，两侧显示附加内容，且两边两栏宽度固定，中间栏宽度自适应。

（一）圣杯布局

代码：

HTML：

<body>
    <div class="wrap">
        <div class="content">
            content
        </div>
        <div class="left">left</div>
        <div class="right">right</div>
    </div>
</body>

CSS：

<style>
    .content{
        background: blue;
        height: 200px;
        width: 100%;
    }
    .left,.right{
        width: 200px;
        height: 200px;
        background: orange;
    }
    .wrap div{
        float: left;
    }
   .wrap{
        padding: 0 200px;
    }
    .left{
        position: relative;
        left: -200px;   
        margin-left: -100%;   
    }
    .right{
        margin-left: -200px;
        position: relative;
        right: -200px;
    }
</style>

圣杯布局的实现步骤：

1. 先在页面中创建一个父容器 wrap，再在 wrap 中创建 content，left，right 三个子容器并给三个容器设置宽高（因为中间的 content 盒子用来展示主要内容，故应该先加载中间容器，所以我们最先创建 content 容器）

此时页面呈现以下效果：

2. 我们给三个子容器设置浮动

此时页面发生了变化：

3. 为了实现三列布局，下面的两个容器要去到上一行与content容器并齐，所以为了不遮挡 content 的内容，我们需要给 left 和 right 两个容器空出位置，所以父容器 wrap 设置内边距（左右边距离分别为为 left 和 right 容器的宽度），把内容部分从两边往中间挤

现在的页面为：

4. 给 left 容器设置相对定位，使其向左移动一个距离（该距离为 left 自身的宽度）

此时页面展示为：

5. 再给 left 容器设置一个 margin-left: -100%（向左移动父容器的100%）

此时 left 去到了 content 的左边：

6. 给 right 容器设置一个 margin-left: -200px （向左移动一个自身宽度的距离）

此时 right 容器在 content 容器的右边，由于父容器 wrap 有内边距，故 right 占据了 content 容器之前的位置，如图：

7. 最后给 right 容器设置相对定位，使其占据右边距的位置

页面设置完成：

（二）双飞翼布局

代码：

HTML:

<body>
    <div class="wrap">
        <div class="content">
            <div class="inner">content</div>
        </div>
        <div class="left">left</div>
        <div class="right">right</div>
    </div>
</body>

CSS：

    <style>
        .left,.right{
            width: 200px;
            height: 200px;
            background: pink;
            float: left;
        }
        .content{
            width: 100%;
            height: 200px;
            background: purple;
            float: left;
        }
        .inner{
            margin: 0 200px;
            height: 200px;
        }
        .left{
            margin-left: -100%;
        }
        .right{
            margin-left: -200px;
        }
    </style>

双飞翼布局的实现步骤：

1. 和圣杯布局类似，先在页面上创建一个父容器 wrap ，再在 wrap 中创建 content，left，right 三个子容器并给三个容器设置宽高（同样也最先创建 content 容器），然后再在 content 容器中创建一个子容器 inner 用来装实体内容

此时页面如下：

2. 给 content，left，right 三个子容器设置浮动

如图：

3. 给容器 inner 设置左右外边距，空出 left ，right 两个容器的宽度，防止 inner 部分的主要内容被遮挡

此时实体内容往中间缩进：

4. 给 left 容器设置 margin-left: -100%，使 left 容器移到上一行，来到 inner 容器的左边（覆盖在 content 容器上）

现在页面变成这样:

5. 给 right 容器设置 margin-left: -200px（向左移一个自身的宽度），把 right 移到 inner 容器的右边（同样也覆盖在 content 容器上）

双飞翼布局页面完成，如图：

总结

圣杯布局与双飞翼布局都可以较为便捷地实现三列布局，两种布局方法也大致相同，都是先中间再两边，给三个容器都设置浮动，用不同的方式使左、右两个容器来到中间容器的同一行，并且不遮挡中间的主要内容。

区别

圣杯布局：通过给父容器设置内边距减小中间容器的宽度来为左、右容器腾出位置

双飞翼布局：中间容器不变，通过给中间的内容部分添加外边距来给左、右容器腾出位置，防止左、右两个容器遮挡内容

CSS三列布局之圣杯布局与双飞翼布局

引言

（一）圣杯布局

代码：

HTML：

CSS：

圣杯布局的实现步骤：

（二）双飞翼布局

代码：

HTML:

CSS：

双飞翼布局的实现步骤：

总结

区别