專業術語並非「無中生有」，既然有這個說法，我想必定會有他的**與出處。於是，感覺告訴我要繼續。檢視眾多資料，總算是皇天不負有心人，終於找到了關於布局「雙飛燕」的這麼個說法。我暈，其實真正的術語並不叫「雙飛燕」，而是「雙飛翼」，估計是那哥們回帖的時候還在做夢吧……呵呵
開頭侃了半天，現在咱言歸正傳吧！
雙飛翼布局是一種比較靈活的布局，始於**ued，玉伯提出的，當然他著重介紹的是雙飛翼柵格布局。
本文著重講解常用三欄布局。通俗一點講，可以把三欄比作乙隻鳥，main部分相當是於鳥的身體，而left與right就是鳥的「翼」了，鳥想要平衡地飛翔就要把主體位置給擺正確，然後在「翼」的作用下開始起飛。布局也是一樣的，我們也要先把主體給擺好，然後再合理地調整雙翼，這樣整體動作才會比較和諧。
先看一下常規效果：
為了快速載入主體內容，我們在布局時候可以把最重要的放在最前面。比如：
main
left
right
實現要求：主間部分內容的寬度是要自適應的，左、右兩邊寬度分別為20%，30%
首先呢，我們需要把這三列都浮動起來，即：
.main,.left,.right
說明：這裡的高度是我自己設定的，在實際布局中可以根據需要來定，他們可以任意設定自己的高度。
主體main的寬度要自適應，那麼可以先設定為100%，然後隨便上個背景色與」翼「做區分
.main
接下來便是」翼「的設定了
左邊：
.left
右邊：
.right
基本樣式已設定完成，但預覽頁面你會發現並沒有達到預期的效果。。。
那麼接下來，我們應該怎麼做呢？
回到題目中，想要left居左，那麼我們可以設定 margin-left:-100%; 即：
.left
說明：這裡的100%為main的寬度，相當於是把left給左移了，剛好實現左邊與main的對齊。
對於right居右問題，也是類似可以設定margin-left:30%; 即：
.right
說明：這裡的30%為right自身的寬度，相當於是自己向左移了自身的乙個寬度，剛好實現右邊與main的對齊。
這時，整個布局看起來像是完成了，其實還剩關鍵的一步，即main的位置該如何設定？目前，他的左邊及右邊部分元素是會被left/right擋住的，所以我們還必須在main裡面再新增乙個div(class="mainin")，設定margin:0 30% 0 20%;，把兩邊內容給擠開，這樣才是完美的效果。
css 雙飛翼布局
原理 1.三個盒子的都浮動 2.中間盒子套乙個盒子 父元素 width 100 鋪滿一行 3.左側盒子margin left 100 右側盒子margin right 右側盒子的寬度 px，這樣將三個哦盒子拉到一排上。4.中間盒子的子元素margin left 左側盒子的寬度，margin righ...
CSS 聖杯 雙飛翼布局
html結構 123 123123 css container 把左右兩邊距離空出來 containercenter 設定widh為100 即充滿整個容器 center浮動 設定left，center，right左浮動。清除container浮動，保證後面的div正常布局 left,center,r...
css經典布局 雙飛翼布局
聖杯布局的出現是來自由 matthew levine 在 2006 年寫的一篇文章 in search of the holy grail 在國內最早是 ued的工程師 玉伯大大 對聖杯布局改進並傳播開來，在中國的叫法是雙飛翼布局 聖杯布局和雙飛翼布局達到的效果基本相同，都是側邊兩欄寬度固定，中間欄...