兩種布局的由來(lái)
- 這是需求導(dǎo)致。兩個(gè)需求： 一，優(yōu)先加載中間的盒子；二，中間盒子能自適應(yīng)寬度，兩邊盒子不變。為了實(shí)現(xiàn)這樣的需求，產(chǎn)生了這兩種布局
布局思路
- 為了滿足第一個(gè)需求，所以中間的盒子必須得先寫，然后，兩邊的盒子寫在后面。同時(shí)為了滿足中間盒子能夠自適應(yīng)，寬度需要設(shè)置為100%，然后再布局兩邊的盒子
圣杯布局
<style>
.main {
padding: 0 200px;
}
.middle {
width: 100%;
float: left;
min-width: 500px;
}
.left {
width: 200px; 數(shù)值只是舉例
float: left;
margin-left: -100%; 這樣才能與中間盒子顯示為一行，移動(dòng)到左邊
position: relative;
left: -200px; 因?yàn)樵O(shè)置內(nèi)邊距，兩邊盒子也會(huì)擠到中間，所以要用定位移動(dòng)
}
.right {
width: 200px; 數(shù)值只是舉例
float: left;
margin-left: -200px; 這樣才能與中間盒子顯示為一行，移動(dòng)到右邊
position: relative;
left: 200px; 因?yàn)樵O(shè)置內(nèi)邊距，兩邊盒子也會(huì)擠到中間，所以要用定位移動(dòng)
}
</style>
<div class="main">
<div class="middle"></div>
<div class="left"></div>
<div class="right"></div>
</div>
雙飛翼布局
<style>
.middle {
width: 100%;
float: left;
}
.middle-in{
margin: 0 200px; 雙飛翼和圣杯的差別就在這里，當(dāng)middle里面再嵌套一個(gè)盒子后，就可以直接設(shè)置margin來(lái)調(diào)整寬度，而不影響外邊的盒子，兩邊的就不用再定位了
min-width: 500px;
}
.left {
width: 200px; 數(shù)值只是舉例
float: left;
margin-left: -100%; 這樣才能與中間盒子顯示為一行，移動(dòng)到左邊
}
.right {
width: 200px; 數(shù)值只是舉例
float: left;
margin-left: -200px; 這樣才能與中間盒子顯示為一行，移動(dòng)到右邊
}
</style>
<div class="main">
<div class="middle">
<div class="middle-in"></div>
</div>
<div class="left"></div>
<div class="right"></div>
</div>
