鏈結
聖杯布局和雙飛翼布局基本上是一致的，都是兩邊固定寬度，中間自適應的三欄布局，其中，中間欄放到文件流前面，保證先行渲染。解決方案大體相同，都是三欄全部float:left浮動，區別在於解決中間欄div的內容不被遮擋上，聖杯布局是中間欄在新增相對定位，並配合left和right屬性，效果上表現為三欄是單獨分開的（如果可以看到空隙的話），而雙飛翼布局是在中間欄的div中巢狀乙個div，內容寫在巢狀的div裡，然後對巢狀的div設定margin-left和margin-right，效果上表現為左右兩欄在中間欄的上面，中間欄還是100%寬度，只不過中間欄的內容通過margin的值顯示在中間。
效果簡圖如下：
1、聖杯布局
注意middle寫在前面就行了，dom結構如下：dom:
header
middle
left
right
footer
dom**如下：middle
left
right
footer
雙飛翼布局是在middle的div裡又插入乙個div，通過調整內部div的margin值，實現中間欄自適應，內容寫到內部div中。
css**如下：聖杯布局和雙飛翼布局
雙飛翼布局和聖杯布局其實是我們經常會在 中看到的經典的三欄式布局，即中間是主要內容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...
聖杯布局和雙飛翼布局
聖杯布局 title style type text css body 2.設定container的樣式 container 3.設定middle left right的公用樣式 middle,left,right 4.設定middle的樣式 middle 5.設定left的樣式 left 6.設定...