聖杯布局和雙飛翼布局基本上是一樣的，都是兩邊固定寬度，中間自適應的三欄布局，其中，中間欄放到文件流前面，保證先行渲染。解決方案大體相同，都是三欄全部float:left浮動，區別在於解決中間欄div的內容不被遮擋上，聖杯布局是中間欄在新增相對定位，並配合left和right屬性，效果上表現為三欄是單獨分開的（如果可以看到空隙的話），而雙飛翼布局是在中間欄的div中巢狀乙個div，內容寫在巢狀的div裡，然後對巢狀的div設定margin-left和margin-right，效果上表現為左右兩欄在中間欄的上面，中間欄還是100%寬度，只不過中間欄的內容通過margin的值顯示在中間。
header
middle
hhhhhhhhhhhhhhhhhhhhhh
hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
hhhhhhhhhhhhhhhhhhhhhh
hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
left
oooooooooooooo
0000000000000000
00000000000000000
ooooooooooooooo
ooooooooooooooo
000000000000000
right
bbbbbbbbbbbbbb
888888888888888888
bbbbbbbbbbbbbbbbbb
88888888888888888888
footer
header
main
hhhhhhhhhhhhhhhhhhhhhh
hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
hhhhhhhhhhhhhhhhhhhhhh
hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
suboooooooooooooo
00000000000000000
ooooooooooooooo
ooooooooooooooo
000000000000000
extra
bbbbbbbbbbbbbb
bbbbbbbbbbbbbbbbbb
88888888888888888888
footer
聖杯布局 和 雙飛燕布局
聖杯布局和雙飛翼布局基本上是一樣的，都是兩邊固定寬度，中間自適應的三欄布局，其中，中間欄放到文件流前面，保證先行渲染。解決方案大體相同，都是三欄全部float left浮動，區別在於解決中間欄div的內容不被遮擋上，聖杯布局是中間欄在新增相對定位，並配合left和right屬性，效果上表現為三欄是單...
聖杯布局以及雙飛燕布局
布局的樣式 兩邊定寬，中間自適應的三欄布局，中間欄放在文件流前面以優先渲染 聖杯布局 1.三塊都設定向左浮動且使用相對定位 2.包含三塊的父元素設定左右的padding值，給左右兩部分留出空間 3.中間塊寬度設定為100 4.左右兩邊設定負邊距margin left，左部分設定 100 右部分設定 ...
雙飛燕布局
布局的效果跟聖杯的一樣，有所不同。雙飛燕布局的 更加簡單，只是多加了乙個div用來布局。基礎布局部分 一樣。main部分 main 這裡不需要加padding了 m content,m leftside,m rightside m content 用左右邊距將左右邊欄的位置預留出來 m c wrap...