今天在逛贴吧时看到了一个叫双飞翼布局的术语，于是搜索了一下，找到了不少相关资料进行了脑补一番。

在搜索的同时，我还发现了一个叫做圣杯布局的术语，我想：淘宝的这个双飞翼布局应该是借鉴了国外的圣杯布局吧。(个人猜测，猜测依据：国外比国内牛b，依据待考证。)

那么这个双飞翼布局有什么优点呢，网上相关资料( www.dqqd.me/flying-wing/ )给出的优点介绍是：
1.实现了内容与布局的分离，即Eric提到的Any-Order Columns.
2.main部分是自适应宽度的，很容易在定宽布局和流体布局中切换。
3.任何一栏都可以是最高栏，不会出问题。
4.需要的hack非常少（就一个针对ie6的清除浮动hack:_zoom: 1;）
5.在浏览器上的兼容性非常好，IE5.5以上都支持。

我们还是来看看具体的案例吧：现在有一个一行3列的布局，最外层是一个名为grid-s5m0e5的div，左侧一列名为col-sub，中间一列名为col-main，右侧一列名为col-extra。(如果是对淘宝店铺有过研究的会发现这个就是淘宝里面的三栏布局，如图： )多栏布局可以在淘宝后台--布局管理中新建时自由选择。如图： )grid-s5m0e5和col-main的宽度均为100%，col-sub和col-extra的宽度均为190px，然后来看下html代码

<div class="grid-s5m0e5">
　<div class="col-main">col-main</div>
　<div class="col-sub">col-sub</div>
　<div class="col-extra">col-extra</div>
</div>

下面是来写css了，但是会有一个问题：col-main的宽度已经是100%了，如何再让另外同辈元素并排展示在一行呢？

其实，解决的方法肯定是有的并且不是唯一的，只是哪种最好最优而已。你可以采用relative和方位值来进行控制，但这种方法要多写好几个属性，我们还是来看看淘宝官方的做法吧。如图： 

看到没有，官方只要用到了一个负值就解决了问题。下面我们按照官方的写法来尝试完成这个双飞翼的布局吧。

*{margin:0;padding:0}
.grid-s5m0e5 { width:100%;color:#fff;}
.col-main{float:left;width:100%;min-height:30px;background:#333; }
.col-sub,.col-extra{float:left; width:190px; min-height:30px; background:#666;margin-left:-100%;}
.col-extra{background:#999;}

上面代码的效果图如下： 从图中可以看到col-sub已经回到本身的位置了。不知道有没有看官对这个margin-left:-100%;产生疑惑，为什么这里是-100%而不是别的呢？不要忘记了这里的html布局结构是div.col-main+div.col-sub+div.col-extra而不是div.col-sub+div.col-main+div.col-extra(如果这里的col-main的宽度为90%的话，margin-left的负值就是-90%了，也就是说：margin的负值等于col-main的宽度。)。至于为什么是前面一种，从seo方面是利于优化，但具体情况要问淘宝了。继续上面的说，下面让col-extra回位。

.col-extra{margin-left:-190px;}

再来看下效果图： ，目测已经达到了我们的要求了，可是你会发现col-main这几个文字不见了。为什么会不见了呢？因为上面我们采用负边距的方法将col-sub进行了复位，而col-main与col-sub重叠的那一块并没有进行处理(，其实右侧的col-extra与col-main也有重叠部分)，所以接下来是处理工作。

有人会说了，这还不简单么，我直接给col-main添加一个margin-left:190px;搞定，可是呢，来看下效果图： ，我们还是来看下淘宝官方的做法吧，如图： 官方是在里面添加了一个名叫main-wrap的div，此时我们对这个main-wrap添加margin就可以了。

.main-wrap{margin:0 190px;}

乍一看好像已经没有问题了，但是这个并没有实现自适应高度，不信你看： 此时，再添加一串代码即可。

.grid-s5m0e5{overflow:hidden;_zoom:1}
.col-main,.col-sub,.col-extra{margin-bottom:-99999px;padding-bottom:99999px;}

最后来看下效果图： 终于大功告成了。

在这个案例中，负边距一直是个重要角色。而圣杯布局对于同样的效果则采用的是增加相对定位和方位进行控制，并没有新增一个名叫main-wrap的标签；淘宝呢，是恰恰相反。好了，该去啃资源去了。

Demo演示CSS布局之淘宝双飞翼布局.zip

转载声明：
　　若亲想转载本文到其它平台，请务必保留本文出处！
本文链接：/xwzj/2015-04-21/258.html

若亲不想直保留地址，含蓄保留也行。艺灵不想再看到有人拿我的技术文章到他的地盘或者是其它平台做教(装)程(B)而不留下我的痕迹。文章你可以随便转载，随便修改，但请尊重艺灵的劳动成果！谢谢理解。