原文
大綱
1、三欄布局的引入
2、基本思路及不同實(shí)現(xiàn)方式的區(qū)別
3、布局實(shí)例
3.1、圣杯布局
3.2、雙飛翼布局
1、三欄布局的引入
關(guān)于三欄式布局，常規(guī)情況下，可以使用float實(shí)現(xiàn)，也可以使用relative來(lái)實(shí)現(xiàn)。
但是，如果要求左右兩層定寬，中間層的寬度隨瀏覽器窗口寬度變化而變化，這種情況下，就適合使用圣杯和雙飛翼布局。通過(guò)對(duì)圣杯及雙飛翼布局學(xué)習(xí)之后，我認(rèn)為兩種布局的主旨是在html結(jié)構(gòu)中，使中間的主體層位于左右兩層的前面。
圣杯：指的是一種常用的網(wǎng)頁(yè)布局，他可以由現(xiàn)有的技術(shù)（無(wú)一沒(méi)有缺點(diǎn)）來(lái)實(shí)現(xiàn)。所以找到一種最優(yōu)的實(shí)現(xiàn)方法就好像尋找難以捉摸的圣杯一樣。
雙飛翼布局：是一種靈活的布局，始于淘寶UED。如果把三欄布局比作一只大鳥(niǎo)，可以把main看成是鳥(niǎo)的身體，sub和extra則是鳥(niǎo)的翅膀。這個(gè)布局的實(shí)現(xiàn)思路是，先把最重要的身體部分放好，然后再將翅膀移動(dòng)到適當(dāng)?shù)牡胤?。是?duì)圣杯布局的一種改良。
其實(shí)，圣杯布局和雙飛翼布局都是很早就出現(xiàn)了，只是國(guó)外大學(xué)生/淘寶UED將其歸納起來(lái)，系統(tǒng)化了。
2、基本思路及不同實(shí)現(xiàn)方式的區(qū)別
2.1、兩種布局的基本構(gòu)思為：首先讓中間層100%寬度占滿(mǎn)同一高度的空間，在左右兩層被擠出中間層所在區(qū)域時(shí)， 使用margin-left的負(fù)值將左右兩個(gè)層拉回與中間層同一高度的空間，接下來(lái)調(diào)整左右兩層到指定位置， 最后使用中間層的margin或padding屬性使中間層的內(nèi)容躲出左右兩層占住的顯示區(qū)。
2.2、兩種布局的主要區(qū)別在于：圣杯布局采用一個(gè)父層包含中間、左右三個(gè)子層，設(shè)置父層的padding值騰出左右兩層的顯示區(qū)， 并對(duì)左右兩層使用relative和left、right值調(diào)整位置；雙飛翼采用中間、左右三層并列，再在中間層里設(shè)置一個(gè)子層， 設(shè)置中間層子層的margin值騰出左右兩層的顯示區(qū)，對(duì)左右兩層使用margin值即可調(diào)整位置；
3、布局實(shí)例
3.1、圣杯布局
<html>
<head>
<title>圣杯布局</title>
<meta charset="utf-8">
<style>
header{
width: 100%;
height: 40px;
background-color: darkseagreen;
}
#container{
height:200px;
padding: 0px 120px 0 140px;/*騰出寬度,即讓main中的內(nèi)容不會(huì)被左右的部分覆蓋*/
background:green;
}
#main{
height:200px;
width: 100%;
position: relative;
background:orange;
float:left;
}
#left{
height:200px;
width: 140px;
margin-left: -100%;/*將left層拉回main層所在高度區(qū)域*/
left: -140px;/*調(diào)整位置*/
position: relative;
background:blue;
float:left;
}
#right{
height:200px;
width: 120px;
margin-left: -120px;/*將right層拉回main層所在高度區(qū)域*/
right: -120px;/*調(diào)整位置*/
position: relative;
background:yellow;
float:left;
}
footer{
width: 100%;
height: 30px;
background-color: darkslategray;
}
</style>
</head>
<body>
<header>header</header>
<div id="container">
<div id="main">main</div>
<div id="left">left</div>
<div id="right">right</div>
</div>
<footer>footer</footer>
</body>
</html>
3.2、雙飛翼布局
<html>
<head>
<title>三欄布局</title>
<meta charset="utf-8">
<style>
header{
width: 100%;
height: 40px;
background-color: darkseagreen;
}
#main{
width: 100%;
height:200px;
position: relative;
float:left;
}
#main-inner{
margin:0 120px 0 140px;/*讓main的內(nèi)容不被左右的內(nèi)容覆蓋*/
background:red;
height:100%;
}
#left{
width: 140px;
height:200px;
margin-left: -100%;/*將left層拉回main層所在高度區(qū)域*/
background:blue;
float:left;
}
#right{
width: 120px;
height:200px;
margin-left: -120px;/*將right層拉回main層所在高度區(qū)域*/
background:yellow;
float:left;
}
footer{
width: 100%;
height: 30px;
background-color: darkslategray;
clear:both;/*避免因前面的元素浮動(dòng)而上浮*/
}
</style>
</head>
<body>
<header>header</header>
<div id="main">
<div id="main-inner">min-inner</div>
</div>
<div id="left">left</div>
<div id="right">right</div>
<footer>footer</footer>
</body>
</html>
