双飞翼布局

今天有人在群里提到“双飞翼布局”，以前没听过，于是google，百度一顿搜，说明的确菜了。不过现在知道了，哈哈。转入正题。。。。

据说最初是淘宝玉伯提出来的，我特意去看了下http://ued.taobao.com/blog/2008/11/grid_system_research_4/。

老实说没太看懂，后来是看http://www.cnblogs.com/front-end/archive/2012/08/29/zq_0406.html  这篇文章看懂了的(写的很详细哦)。

http://hi.baidu.com/pop123shen/item/2929385d4d4f663594eb053b 也可以参考下

 

通俗的说就是三列布局，中间那列自适应宽度。但是如果真正掌握了方法可以在基本不懂html结构的情况下，衍生出很多布局。

上代码：

<div class="wrap">

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

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

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

</div>

 css

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

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

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

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

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

最后发现自己还是很菜，再去了解下-margin的用法吧。

http://hi.baidu.com/zhangqian04062/item/6921f195d26146b6cc80e53c

这篇文章不错