三列布局之双飞翼布局

要实现中间列宽度自适应，左右两边固定宽度的三列布局，还可以使用双飞翼的布局方式。这种布局方式始于淘宝UED，同圣杯布局的操作流程非常相似，只是在最后一步有所不同。上一篇博客提到的圣杯布局，最后一步需要使用相对定位，让左右两列分别移动到它们应该待的位置上去。可是，因为用了相对定位，所以布局就显得不那么方便简洁了。为了避免圣杯布局的这一点不足，双飞翼布局应运而生。那么它到底是怎样弥补圣杯布局的不足的呢？接下来就进行分析：

要通过双飞翼布局的方式完成一个三列布局，基本的操作流程如下所示：

1 html标签布局

首先应该对页面进行布局，在双飞翼布局中，页面的基础构建与圣杯布局相似，都是让中间列在最前方，这是保证布局能顺利完成的最重要的一步，也实现了中间重要的内容优先加载的目的。布局代码如下：

<header></header>
    <div class="container">
        <div class="center">
            <div class="content">main</div>
        </div>
        <div class="left"></div>
        <div class="right"></div>
    </div>
    <footer></footer>

仔细观察，可以看见上上述结构中，中间列还有一个包裹层，即类名为center的包裹层。这个包裹层的在后面会用到，在这里先不详细说，布局结构如图：

其中，白色的部分，为中间列，后面的两个定宽的区域分别为左右列。

 

2 使用浮动和外边距让三列位于同一行

要想让三个块级元素位于同一列，则需要使用浮动，所有在这里，让三列都浮动起来，但是因为中间列的宽度为100%，所有左右两列还是会在中间列的下面一行。所有还需要使用外边距让左右列上去。这一步的操作同圣杯布局一致，代码如下：

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

.left{
    margin-left:-100%;
    width:120px;
    height:100px; 
    background:#66ffcc;
}
.right{
    margin-left:-200px;
    width:200px;
    height:200px;
    background:#ccffcc;
}

经过上述操作后，就可以得到下图的布局：

 

3 让左右列移动到该去的位置

从上面的图可以看出，左右列经过浮动和外边距操作后，同中间列位于一行了。但是却覆盖了中间列的两边位置，而我们的需求却是，让左右两列分别移动到左右，中间列位于两者之间。所以，还需要对这两列进行移动。在圣杯布局中，我们知道，使用了相对布局。在双飞翼布局中，我们则需要采用另一种方法，还记得我们之前提到过的那个包裹层吗？现在它就可以发挥作用了。上述代码中，我们让包裹层的宽度为100%，在包裹层中，我们还另外有个类名为content的区域，这里就是真正的中间列的内容。要想让左右两列分别向左向右移动宽度那么多的距离，只要设置类名为content的这个元素的左右外边距就好了呀。因此，代码如下：

.content{
    border:1px solid #ccc;
    margin:0 200px 0 120px;
    background:#ffffcc;
}

这样一来，就实现了三列布局，就像下面这样：

 与圣杯布局相比，双飞翼布局，不需要先设置padding值，不需要设置相对定位。需要给中间层加一个包裹层，这样就可以在最后一步使用外边距来让左中右三列分别移动到该去的位置。如果没有包裹层，就直接使用margin，就会让中间层的宽度改变，三列就不会在同一行。