雙飛翼佈局

今天有人在羣裏提到「雙飛翼佈局」，之前沒聽過，因而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

這篇文章不錯