(原文鏈接有點(diǎn)問(wèn)題，慎點(diǎn))
仔細(xì)分析各種布局的技術(shù)實(shí)現(xiàn)，可以發(fā)現(xiàn)下面三種技術(shù)被經(jīng)常使用：
浮動(dòng) float
負(fù)邊距 negative margin
相對(duì)定位 relative position
這是實(shí)現(xiàn)布局的三個(gè)最基本的原子技術(shù)。只要巧妙組合，并加以靈活運(yùn)用，就能“拼”出各種布局的實(shí)現(xiàn)方案。
嘗試之路考慮以下DOM結(jié)構(gòu)：
<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>
利用浮動(dòng)元素的負(fù)邊距來(lái)定位：
.main {
float: left;
width: 100%;
} .sub {
float: left;
width: 190px;
margin-left: -100%; } .extra {
float: left;
width: 190px;
margin-left: -190px;
}
這樣我們得到了第一個(gè)嘗試頁(yè)面 點(diǎn)擊這里查看效果可以看出，通過(guò)簡(jiǎn)單的負(fù)邊距，已經(jīng)讓sub和extra定位到正確的位置。剩下的問(wèn)題是如何讓main也定位到正確的位置。一個(gè)自然的想法是，給main的容器#bd添加padding:
#bd {
padding: 0 230px 0 190px;
}
點(diǎn)擊這里查看效果這樣能讓main定位到正確的位置，但sub和extra的位置不對(duì)了。這是一個(gè)思考的關(guān)卡。既然sub和extra的位置不對(duì)，那就想辦法調(diào)整到正確的位置。相對(duì)定位隆重登場(chǎng)：
.sub {
float: left;
width: 190px;
margin-left: -100%;
position: relative;
left: -190px; }
.extra {
float: left;
width: 230px;
margin-left: -230px;
position: relative;
right: -230px; }
點(diǎn)擊這里查看完成頁(yè)面 很明顯，這就是圣杯布局！在不增加任何額外標(biāo)簽的假設(shè)上，我嘗試了各種想法，但始終都沒(méi)找到完美的布局實(shí)現(xiàn)（圣杯布局是我覺(jué)得所有想法中最接近完美的）。既然不添加額外標(biāo)簽時(shí)，完美布局的實(shí)現(xiàn)如此困難，那如果允許添加一個(gè)額外標(biāo)簽?zāi)兀吭谔詫歎ED內(nèi)部的探討中，給main增加了一層包裹：
<div id="main" class="column">
<div id="main-content">#main</div>
</div>
里層main-content的作用就是將main定位到合適的位置，并方便設(shè)置padding等屬性。想到此處，就像牛頓被蘋果砸傻了一樣，原來(lái)的main定位問(wèn)題迎刃而解：
<div id="page">
<div id="bd">
<div class="main"></div>
</div>
</div>
CSS僅需增加一行：
.main-wrap { margin: 0 230px 0 190px;}
想看example4效果點(diǎn)這里一切如此簡(jiǎn)單！除了添加了一個(gè)額外標(biāo)簽，其它各方面，表現(xiàn)都很完美（試了下IE5.5, 也沒(méi)任何問(wèn)題）。目前只用到了浮動(dòng)和負(fù)邊距，如果再引入相對(duì)定位，還可以實(shí)現(xiàn)三欄布局的各種組合
.extra {
float: left;
width: 230px;
margin-left: -100%;
position: relative;
left: 190px;
} .main-wrap {
margin-left: 430px;
}
點(diǎn)擊這里查看example5效果
仔細(xì)查看example5和example4的源代碼，可以發(fā)現(xiàn)DOM結(jié)構(gòu)是完全一樣的，僅僅CSS稍有不同。這意味著HTML結(jié)構(gòu)和CSS布局在一定程度上解耦了，我們開(kāi)發(fā)HTML代碼時(shí)，從內(nèi)容出發(fā)即可，無(wú)需過(guò)多的考慮布局。這正是漸進(jìn)增強(qiáng)在前端工作流程上的體現(xiàn)。如果把三欄布局比作一只大鳥(niǎo)，可以把main看成是鳥(niǎo)的身體，sub和extra則是鳥(niǎo)的翅膀。這個(gè)布局的實(shí)現(xiàn)思路是，先把最重要的身體部分放好，然后再將翅膀移動(dòng)到適當(dāng)?shù)牡胤健Ｒ虼苏?qǐng)容許我給這個(gè)布局實(shí)現(xiàn)取名為雙飛翼布局（Flying Swing Layout）.就如上圖中的鳥(niǎo)有各種姿勢(shì)一樣，利用雙飛翼布局，我們也可以實(shí)現(xiàn)各種布局。這里有個(gè)嘗試頁(yè)面，利用雙飛翼，實(shí)現(xiàn)了一套柵格化布局系統(tǒng)。
優(yōu)點(diǎn)
實(shí)現(xiàn)了內(nèi)容與布局的分離，即Eric提到的Any-Order Columns.
main部分是自適應(yīng)寬度的，很容易在定寬布局和流體布局中切換。
任何一欄都可以是最高欄，不會(huì)出問(wèn)題。
需要的hack非常少（就一個(gè)針對(duì)ie6的清除浮動(dòng)hack:_zoom: 1;）
在瀏覽器上的兼容性非常好，IE5.5以上都支持。
不足
main需要添加一個(gè)額外的包裹層。
等待你的發(fā)現(xiàn)與反饋。
雙飛翼的布局非常靈活，只要調(diào)整css代碼就可以搞定一切。最近在一個(gè)論壇項(xiàng)目中準(zhǔn)備嘗試使用這個(gè)布局。希望大家有更好的布局方法一定要多多分享。
原文來(lái)自：http://www.dqqd.me/flying-wing/
