css双飞翼布局 | 易学教程

今天，在一个论坛中无意看到了一同胞的回复，称楼主的三列布局为“双飞燕”布局，一开始很诧异，寻思了半天，真有这种布局么？不解与疑惑中，于是便去请教了度娘。然而，在百度中的解释多数是关于下棋一方面的技术与技巧，我更疑惑了。。。

专业术语并非“无中生有”，既然有这个说法，我想必定会有他的来源与出处。于是，感觉告诉我要继续。查看众多资料，总算是皇天不负有心人，终于找到了关于布局“双飞燕”的这么个说法。我晕，其实真正的术语并不叫“双飞燕”，而是“双飞翼”，估计是那哥们回帖的时候还在做梦吧……呵呵

开头侃了半天，现在咱言归正传吧！

双飞翼布局是一种比较灵活的布局，始于淘宝UED，玉伯提出的，当然他着重介绍的是双飞翼栅格布局。

　　本文着重讲解常用三栏布局。通俗一点讲，可以把三栏比作一只鸟，main部分相当是于鸟的身体，而left与right就是鸟的“翼”了，鸟想要平衡地飞翔就要把主体位置给摆正确，然后在“翼”的作用下开始起飞。布局也是一样的，我们也要先把主体给摆好，然后再合理地调整双翼，这样整体动作才会比较和谐。

先看一下常规效果：

为了快速加载主体内容，我们在布局时候可以把最重要的放在最前面。比如：

<div class="right">right</div>

</div>

实现要求：主间部分内容的宽度是要自适应的，左、右两边宽度分别为20%，30%

首先呢，我们需要把这三列都浮动起来，即：

.main,.left,.right { float:left; height:200px; }

说明：这里的高度是我自己设置的，在实际布局中可以根据需要来定，他们可以任意设置自己的高度。

主体main的宽度要自适应，那么可以先设置为100%，然后随便上个背景色与”翼“做区分

.main { width:100%; background:#ace; }

接下来便是”翼“的设置了

左边：

.left { width:20%; background:#eee; }

右边：

.right { width:30%; background:#ddd; }

基本样式已设置完成，但预览页面你会发现并没有达到预期的效果。。。

那么接下来，我们应该怎么做呢？

大家可以回想一下margin的用法，对于其负值有很奇妙的用法（这里不多做说明，文章最后我会推荐一些相关文章，感兴趣的童鞋可以看看），而在这里，关键也是运用margin负值才得以实现效果。

回到题目中，想要left居左，那么我们可以设置 margin-left:-100%; 即：

.left { width:20%; background:#eee; margin-left:-100%; }

说明：这里的100%为main的宽度，相当于是把left给左移了，刚好实现左边与main的对齐。

对于right居右问题，也是类似可以设置margin-left:30%; 即：

.right { width:30%; background:#ddd; margin-left:-30%; }

说明：这里的30%为right自身的宽度，相当于是自己向左移了自身的一个宽度，刚好实现右边与main的对齐。

这时，整个布局看起来像是完成了，其实还剩关键的一步，即main的位置该如何设置？目前，他的左边及右边部分元素是会被left/right挡住的，所以我们还必须在main里面再添加一个div(class="mainIn")，设置margin:0 30% 0 20%;，把两边内容给挤开，这样才是完美的效果。

延伸：对于这种方法，同时也可以随便调换他们的位置，你只需要控制他们的位移即可，都是成功的，这点大家可以做个尝试。

大致思路是这样的，本文就介绍到这里了。关于本文的参考资料及margin负值的更多用法，可以参考：

http://ued.taobao.com/blog/2008/11/05/grid_system_research_4/

http://hi.baidu.com/pop123shen/item/2929385d4d4f663594eb053b

http://hi.baidu.com/zhangqian04062/item/122731cfee19d802c610b239

http://hi.baidu.com/zhangqian04062/item/87895480c829e2e0e596e03c

来源：https://www.cnblogs.com/front-end/archive/2012/08/29/zq_0406.html

标签

双飞翼

css

css样式