聖盃佈局和雙飛翼佈局

仔細分析各類佈局的技術實現，能夠發現下面三種技術被常常使用：

浮動 float

負邊距 negative margin

相對定位 relative position

這是實現佈局的三個最基本的原子技術。只要巧妙組合，並加以靈活運用，就能「拼」出各類佈局的實現方案。

嘗試之路考慮如下DOM結構：

1 2 3 4 5 6 7 8

< div  id = "page" >            < div  id = "hd" ></ div >               < div  id = "bd" >                        < div  class = "main" ></ div >                        < div  class = "sub" ></ div >                        < div  class = "extra" ></ div >               </ div >           < div  id = "ft" ></ div ></ div >

利用浮動元素的負邊距來定位：

1 2 3 4 5 6 7 8 9 10 11

.main {                     float :  left ;                    width :  100% ;      }  . sub  {                    float :  left ;                     width :  190px ;                     margin-left :  -100% ;    }   .extra {                       float :  left ;                       width :  190px ;                       margin-left :  -190px ;      }

這樣咱們獲得了第一個嘗試頁面 點擊這裏查看效果 能夠看出，經過簡單的負邊距，已經讓sub和extra定位到正確的位置。剩下的問題是如何讓main也定位到正確的位置。 一個天然的想法是，給main的容器#bd添加padding:

1 2 3

#bd {                    padding :  0  230px  0  190px ;      }

點擊這裏查看效果 這樣能讓main定位到正確的位置，但sub和extra的位置不對了。這是一個思考的關卡。既然sub和extra的位置不對，那就想辦法調整到正確的位置。相對定位隆重登場：

1 2 3 4 5 6 7 8 9 10 11 12

. sub  {                     float :  left ;                     width :  190px ;                     margin-left :  -100% ;                     position :  relative ;                     left :  -190px ;    }      .extra {                       float :  left ;                       width :  230px ;                       margin-left :  -230px ;                       position :  relative ;                       right :  -230px ;    }

點擊這裏查看完成頁面  很明顯，這就是聖盃佈局！ 在不增長任何額外標籤的假設上，我嘗試了各類想法，但始終都沒找到完美的佈局實現（聖盃佈局是我以爲全部想法中最接近完美的）。 既然不添加額外標籤時，完美佈局的實現如此困難，那若是容許添加一個額外標籤呢？在淘寶UED內部的探討中，給main增長了一層包裹：

1 2 3

< div  id = "main"  class = "column" >      < div  id = "main-content" >#main</ div > </ div >

裏層main-content的做用就是將main定位到合適的位置，並方便設置padding等屬性。想到此處，就像牛頓被蘋果砸傻了同樣，原來的main定位問題迎刃而解：

1 2 3 4 5

< div  id = "page" >                      < div  id = "bd" >                          < div  class = "main" ></ div >                  </ div >   </ div >

CSS僅需增長一行：

1	.main-wrap {     margin :  0  230px  0  190px ;}

想看example4效果點這裏 一切如此簡單！除了添加了一個額外標籤，其它各方面，表現都很完美（試了下IE5.5, 也沒任何問題）。目前只用到了浮動和負邊距，若是再引入相對定位，還能夠實現三欄佈局的各類組合

1 2 3 4 5 6 7 8 9

.extra {                      float :  left ;                      width :  230px ;                      margin-left :  -100% ;                      position :  relative ;                       left :  190px ;               }    .main-wrap {                            margin-left :  430px ;                      }

點擊這裏查看example5效果

仔細查看example5和example4的源代碼，能夠發現DOM結構是徹底同樣的，僅僅CSS稍有不一樣。這意味着HTML結構和CSS佈局在必定程度上解耦了，咱們開發HTML代碼時，從內容出發便可，無需過多的考慮佈局。這正是漸進加強在前端工做流程上的體現。 若是把三欄佈局比做一隻大鳥，能夠把main當作是鳥的身體，sub和extra則是鳥的翅膀。這個佈局的實現思路是，先把最重要的身體部分放好，而後再將翅膀移動到適當的地方。所以請允許我給這個佈局實現取名爲雙飛翼佈局（Flying Swing Layout）. 就如上圖中的鳥有各類姿式同樣，利用雙飛翼佈局，咱們也能夠實現各類佈局。這裏有個嘗試頁面，利用雙飛翼，實現了一套柵格化佈局系統。

優勢

實現了內容與佈局的分離，即Eric提到的Any-Order Columns.

main部分是自適應寬度的，很容易在定寬佈局和流體佈局中切換。

任何一欄均可以是最高欄，不會出問題。

須要的hack很是少（就一個針對ie6的清除浮動hack:_zoom: 1;）

在瀏覽器上的兼容性很是好，IE5.5以上都支持。

不足

main須要添加一個額外的包裹層。

等待你的發現與反饋。

雙飛翼的佈局很是靈活，只要調整css代碼就能夠搞定一切。最近在一個論壇項目中準備嘗試使用這個佈局。但願你們有更好的佈局方法必定要多多分享。

 

原文來自：http://www.dqqd.me/flying-wing/