仔細分析各類佈局的技術實現,能夠發現下面三種技術被常常使用: css
這是實現佈局的三個最基本的原子技術。只要巧妙組合,並加以靈活運用,就能「拼」出各類佈局的實現方案。 html
嘗試之路考慮如下DOM結構:前端
<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>
利用浮動元素的負邊距來定位:瀏覽器
.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:spa
#bd { padding: 0 230px 0 190px; }
點擊這裏查看效果 3d
這樣能讓main定位到正確的位置,但sub和extra的位置不對了。這是一個思考的關卡。既然sub和extra的位置不對,那就想辦法調整到正確的位置。相對定位隆重登場:code
.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增長了一層包裹:htm
<div id="main" class="column"> <div id="main-content">#main</div> </div>
裏層main-content的做用就是將main定位到合適的位置,並方便設置padding等屬性。想到此處,就像牛頓被蘋果砸傻了同樣,原來的main定位問題迎刃而解:blog
<div id="page"> <div id="bd"> <div class="main"></div> </div> </div>
CSS僅需增長一行:
.main-wrap { margin: 0 230px 0 190px;}
一切如此簡單!除了添加了一個額外標籤,其它各方面,表現都很完美(試了下IE5.5, 也沒任何問題)。目前只用到了浮動和負邊距,若是再引入相對定位,還能夠實現三欄佈局的各類組合
.extra { float: left; width: 230px; margin-left: -100%; position: relative; left: 190px; } .main-wrap { margin-left: 430px; }
仔細查看example5和example4的源代碼,能夠發現DOM結構是徹底同樣的,僅僅CSS稍有不一樣。這意味着HTML結構和CSS佈局在必定程度上解耦了,咱們開發HTML代碼時,從內容出發便可,無需過多的考慮佈局。這正是漸進加強在前端工做流程上的體現。
若是把三欄佈局比做一隻大鳥,能夠把main當作是鳥的身體,sub和extra則是鳥的翅膀。這個佈局的實現思路是,先把最重要的身體部分放好,而後再將翅膀移動到適當的地方。所以請允許我給這個佈局實現取名爲雙飛翼佈局(Flying Swing Layout).
就如上圖中的鳥有各類姿式同樣,利用雙飛翼佈局,咱們也能夠實現各類佈局。這裏有個嘗試頁面,利用雙飛翼,實現了一套柵格化佈局系統。
優勢
不足
雙飛翼的佈局很是靈活,只要調整css代碼就能夠搞定一切。最近在一個論壇項目中準備嘗試使用這個佈局。但願你們有更好的佈局方法必定要多多分享。