双飞翼布局

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

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

先看一下常规效果：

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

<div class="wrap">

<div class="main">main</div>

<div class="left">left</div>

<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%;，把两边内容给挤开，这样才是完美的效果。

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