CSS 布局实例系列（三）如何实现一个左右宽度固定，中间自适应的三列布局——也聊聊双飞翼 - honoka_H5之家

今天聊聊一个经典的布局实例：

实现一个三列布局，其中左侧和右侧的部分宽度固定，中间部分宽度随浏览器宽度的变化而自适应变化

可能很多朋友已经笑了，这玩意儿通过双飞翼布局就能轻松实现。不过，还请容我在双飞翼之外，循序渐进地介绍一下我们可以如何实现一个三列布局。

1. 首先，使用浮动布局来实现一下

See the Pen float-three-column by xal821792703 (@honoka) on CodePen.

左侧元素与右侧元素优先渲染，分别向左和向右浮动

中间元素在文档流的最后渲染，并将 width 设为 100%，则会自动插入到左右两列元素的中间，随后设置 margin 左右边距分别为左右两列的宽度，将中间元素调整到正确的位置。

这是一种比较便利的实现方式，无需额外的元素辅助定位，同时兼容性也比较优秀。但有一个缺点就是该布局方式只能实现左右两列宽度固定，中间自适应这一种三列布局，灵活性不强。

2. 其实，也可以试试利用 BFC

See the Pen bfc-three-columns by xal821792703 (@honoka) on CodePen.

昨天的《CSS 布局实例系列（二）如何通过 CSS 实现一个左边固定宽度、右边自适应的两列布局》已经谈到了利用 BFC 原理实现多列布局的方法。BFC 元素不会与浮动元素叠加，自然也可以利用 BFC 原理完成这个实例。

同样的左右两列元素优先渲染，并分别左右浮动。

接下来将中间元素设置 overflow: hidden; 成为 BFC 元素块，不与两侧浮动元素叠加，则自然能够插入自己的位置啦。

3. 接下来就尝试一下大名鼎鼎的双飞翼布局吧

See the Pen grid-three-columns by xal821792703 (@honoka) on CodePen.

双飞翼是由淘宝玉伯等前端大牛提出的一种多列布局方法，主要利用了浮动、负边距、相对定位三个布局属性，使三列布局就像小鸟一样，拥有中间的身体和两侧的翅膀。

接下来就简单介绍一下双飞翼的实现过程：

假设我们现在需要一个如实例说明一样的三列布局，写出如下 div 结构：

div-middlediv-leftdiv-right

首先我们将中间元素放在文档流最前面优先渲染，然后使其向左浮动，并设置 width 为 100%：

#div-middle-02 { float: left; background-color: #fff9ca; width: 100%; height: 50px; }

中间元素直接占满全列，形成小鸟的身体。

接下来我们开始为小鸟加上双翼，将左右两列元素均设为左浮动，然后通过调整负边距将其定位在各自的位置上：

#div-middle-02 { float: left; background-color: #fff9ca; width: 100%; height: 50px; } #div-left-02 { float: left; background-color: red; width: 150px; margin-left: -100%; height: 50px; } #div-right-02 { float: left; background-color: yellow; width: 200px; margin-left: -200px; height: 50px; }

看起来，双翼安装成功啦。

这样三列布局就大功告成了？No，no，no，仔细看看上面的效果图，可以发现 div-middle 的字块消失了。这是因为通过负边距调整浮动元素位置时，会产生层叠的效果，上面的布局其实只是左右两列元素分别定位在自己的位置上并覆盖中间元素的那部分而已，中间元素的定位并未成功。中间元素要怎样定位在自己的位置上呢？小鸟的身体不是还缺少骨架嘛，那么我们在小鸟体内加上骨架吧：

div-middle

在中间元素中再增加一层包裹，通过这层骨架我们就可以方便地控制小鸟身体的位置啦，方法就是调整骨架的左右边距，使其分别等于左右两列的宽度：

#div-middle-02 { float: left; background-color: #fff9ca; width: 100%; height: 50px; } #middle-wrap-02 { margin: 0 200px 0 150px; } #div-left-02 { float: left; background-color: red; width: 150px; margin-left: -100%; height: 50px; } #div-right-02 { float: left; background-color: yellow; width: 200px; margin-left: -200px; height: 50px; }

好啦，一个左右定宽，中间自适应的三列布局以双飞翼的方式成功完成。

总结整个过程，就是先放好身体，再加上翅膀，然后让身体包裹一层骨架，通过骨架将身体定位到正确的位置。这就是双飞翼布局的完全体吗？当然不是，接下来我们要请出大杀器相对布局啦，就像小鸟可以通过各种不同的姿势飞翔一般，通过 position: relative; 双飞翼可以实现任意的三列或双列布局。本实例加上相对定位，便成为了这样的完全体：