前言
- 圣杯布局與雙飛翼布局逊彭，都是屬于三列布局的經(jīng)典布局瓦戚。
- 雙飛翼布局是圣杯布局的優(yōu)化版团驱，由淘寶UED提出
- 它們的效果圖類似摸吠，但是實(shí)現(xiàn)方法不同。
字面意思
圣唄布局和雙飛翼布局從字面意思來看是這樣的：
一個像圣杯或者像展翅的禽類這樣的布局
通俗的來說就是左右兩欄固定寬度嚎花，中間部分自適應(yīng)的三欄布局寸痢。
兩者本質(zhì)
image.png
圣杯布局
圣杯布局
原理：利用父級padding內(nèi)邊距
- 是三列布局，兩邊固定寬度贩幻，中間自適應(yīng)
- 中間內(nèi)容元素在 dom 元素次序中優(yōu)先位置
預(yù)覽鏈接：圣杯布局
缺點(diǎn)：.mian的最小寬度不能小于.aside的寬度
image.png
把整個頁面的寬度收縮后轿腺，會出現(xiàn)布局錯亂的效果两嘴，因?yàn)楫?dāng)頁面收縮時丛楚，main因?yàn)槭瞧涓溉萜鱟ontent的100%的寬度族壳，所以main也會跟著收縮，當(dāng)main收縮到比aside寬度還要小趣些，這時候父容器ct的100%寬度<aside的寬度仿荆，就不能容納aside，所以將其擠到了下一行坏平。
解決方法：可以給父容器content加上一個min-width樣式拢操，min-width的值不能小于aside和extra兩者間的寬度最大值，這樣做可以使中間的main的寬度始終比extra和aside大舶替，就不會導(dǎo)致布局錯亂了令境。
源碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
div
<div id="content">
<!-- 自適應(yīng)元素至于頂層，否則其他元素位置錯亂 -->
<div class="main">main</div>
<div class="aside">aside</div>
<div class="extra">extra</div>
</div>
</body>
</html>
#content{
border:1px solid #999;
padding-left: 100px; /*利用內(nèi)邊距填充內(nèi)容,且填充元素的寬度必須一致*/
padding-right: 100px;/*利用內(nèi)邊距填充內(nèi)容,且填充元素的寬度必須一致*/
min-width:200px;/*防止不斷擠壓寬度顾瞪，main寬度過小舔庶，造成布局錯亂*/
}
#content:after{/*清除浮動*/
content:'';
display:block;
clear:both;
}
.main, .aside, .extra{ /*元素全部浮動*/
float:left;
}
.main{
background:blue;
height:350px;
width: 100%; /*寬度自適應(yīng)*/
}
.aside{
background:red;
width: 100px;/*利用父級內(nèi)邊距填充內(nèi)容,寬度與父級寬度必須一致*/
height:300px;
margin-left: -100%; /*減去浮動main的寬度，置于main層級左邊*/
position: relative;
left: -100px;/*移動到父級內(nèi)邊距中*/
}
.extra{
background:yellow;
width: 100px; /*利用父級內(nèi)邊距填充內(nèi)容,寬度與父級寬度必須一致*/
height:300px;
margin-left: -100px; /*減去浮動aside的寬度陈醒，置于main層級右邊*/
position: relative;
left: 100px;/*移動到父級內(nèi)邊距中*/
}
雙飛翼布局
雙飛翼布局
原理：利用自身margin外邊距
- 是三列布局惕橙，兩邊固定寬度，中間自適應(yīng)
- 中間內(nèi)容元素在 dom 元素次序中優(yōu)先位置
預(yù)覽鏈接：雙飛翼布局
源碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div id="content">
<!-- 自適應(yīng)元素至于頂層钉跷，否則其他元素位置錯亂 -->
<div class="main">
<div class="wrap">main</div>
</div>
<div class="aside">aside</div>
<div class="extra">extra</div>
</div>
</body>
</html>
#content{
border:1px solid #999;
}
#content:after{/*清除浮動*/
content:'';
display:block;
clear:both;
}
.main,.aside,.extra{/*元素全部浮動*/
float:left;
}
.main{
width:100%;/*寬度自適應(yīng)*/
}
.wrap{ /*子級wrap負(fù)責(zé)設(shè)置外邊距*/
background:blue;
margin-left: 100px; /*利用外邊距填充內(nèi)容,且填充元素的寬度必須一致*/
margin-right: 100px; /*利用外邊距填充內(nèi)容,且填充元素的寬度必須一致*/
height:350px;
}
.aside{
width:100px;/*利用外邊距填充內(nèi)容,寬度與兄弟wrap寬度必須一致*/
height:300px;
background:red;
margin-left:-100%;/*減去浮動main的寬度弥鹦，置于main層級左邊*/
}
.extra{
width:100px;
height:300px;
background:yellow;
margin-left:-100px;/*減去自身的寬度，置于main層級右邊*/
}
總結(jié)
- 圣杯布局是給三列的父元素（content）爷辙，加上 左margin 和 右margin（或者 padding）彬坏，將三列擠到中間來，這樣左邊和右邊就會預(yù)留出位置膝晾。
- 雙飛翼布局是在main的div里又插入一個div苍鲜，通過調(diào)整內(nèi)部div的margin值，實(shí)現(xiàn)中間欄自適應(yīng)玷犹，內(nèi)容寫到內(nèi)部div中混滔。
