雙飛翼布局和聖杯式布局

聖杯布局和雙飛翼布局基本上是一致的，都是兩邊固定寬度，中間自適應的三欄布局，其中，中間欄放到文件流前面，保證先行渲染。

解決方案大體相同，都是三欄全部 float:left 浮動，區別在於解決中間欄div的內容不被遮擋上。

聖杯布局是中間欄在新增相對定位，並配合left和right屬性，效果上表現為三欄是單獨分開的（如果可以看到空隙的話）。

雙飛翼布局是在中間欄的div中巢狀乙個div，內容寫在巢狀的div裡，然後對巢狀的div設定margin-left和margin-right，效果上表現為左右兩欄在中間欄的上面，中間欄還是100%寬度，只不過中間欄的內容通過margin的值顯示在中間。

聖杯式布局

header

middle
left
right
footer

header

middle
left
right
footer

聖杯布局 雙飛翼布局

前言 上班划水偷空了解了一下聖杯布局和雙飛翼布局，一聽這兩個名字，覺得不明覺厲，其實就是三欄布局，左右兩邊的盒子寬度固定，中間的盒子寬度自適應。以下內容均是總結網際網路上別人的文章。覺得有意思就記錄一下。聖杯布局，方法一 container middle left right style head ...

聖杯布局和雙飛翼布局

雙飛翼布局和聖杯布局其實是我們經常會在 中看到的經典的三欄式布局，即中間是主要內容main content，然後是左邊側欄，一般是 的分類資訊，右邊欄就是一些附屬功能，最典型的例子就是 和京東。main main son left right 上面就是雙飛翼布局的html 結構非常清晰，分為main...

聖杯布局和雙飛翼布局

一 聖杯布局 重點 content的padding，left的margin left和left值，right的margin left和right值 lang en charset utf 8 聖杯布局title header content content main content left,con...