代碼1
代碼2
代碼3
代碼4-float版
代碼4-float簡(jiǎn)化版
代碼4-flex版
代碼5
圣杯布局
雙飛翼布局
以上圣杯／雙飛翼布局改為flex版
其中：
- 圣杯布局：
三列布局身辨，兩遍寬度固定，中間自適應(yīng)芍碧，中間內(nèi)容元素再dom元素次序中優(yōu)先位置煌珊。
缺點(diǎn)：中間欄最小寬度不能小于左側(cè)邊欄的寬度，不然會(huì)出現(xiàn)錯(cuò)亂泌豆。原因是左側(cè)邊欄要浮動(dòng)上去定庵，margin-left是-100%，如果中間欄寬度比左側(cè)邊欄小踪危，那么就浮動(dòng)不上去蔬浙，因?yàn)閷?duì)于側(cè)邊欄來(lái)說(shuō)，中間欄的寬度空間是不夠的贞远。 - 雙飛翼布局：
比圣杯布局多用了1個(gè)div畴博，少用4個(gè)css屬性，分別是：- 圣杯布局容器的 padding-left和padding-right
- 左右兩個(gè)div的position: relative及對(duì)應(yīng)的right蓝仲、left
雙飛翼布局子div里用margin-left和margin-right共2個(gè)屬性俱病，比圣杯布局思路更直接和簡(jiǎn)潔一點(diǎn)。簡(jiǎn)單說(shuō)起來(lái)就是雙飛翼布局比圣杯布局多創(chuàng)建了一個(gè)div袱结，但不用相對(duì)定位了亮隙。
