聖杯布局就是三欄布局，其中左右兩欄固定寬度，中間部分自適應
主要步驟：
在html中，中間的塊在最前面，後面緊跟左邊的塊和右邊的塊
三者均設定float:left，中間塊設定width:100%，此時中間塊在一行，兩個固定寬度的塊在一行。
左邊塊設定margin-left:100%，右邊塊設定margin-left: -width，此時左右塊位於中間塊的兩邊，但是其覆蓋了中間塊的兩側的一部分內容。
設定外層容器padding：0 rightwidth 0 leftwidth，為左右兩邊騰出空白位置。設定左右塊position:relative，且左塊left: -width，且右塊right: -width，使左右快分別向左和右偏移，從而佔據了空白位置。
完整**如下：
這是一段很長長長長長長長長長長長長長長長長長長長長長長長長長長長長長長長長長長長長長長長的內容
div>
class="left">
這是左邊的內容這是左邊的內容這是左邊的內容這是左邊的內容這是左邊的內容這是左邊的內容
div>
class="right">
這是右邊的內容這是右邊的內容這是右邊的內容這是右邊的內容這是右邊的內容這是右邊的內容
div>
div>
body>
html>雙飛翼布局與聖杯布局達成的效果類似，只是實現方法有所差別而已。區別在於雙飛翼給中間塊套了乙個容器，通過設定該容器內部的中間塊margin
屬性從而使中間塊兩側的內容不被左右塊遮擋。
這是一段很長長長長長長長長長長長長長長長長長長長長長長長長長長長長長長長長長長長長長長長的內容
div>
div>
class="left">
這是左邊的內容這是左邊的內容這是左邊的內容這是左邊的內容這是左邊的內容這是左邊的內容
div>
class="right">
這是右邊的內容這是右邊的內容這是右邊的內容這是右邊的內容這是右邊的內容這是右邊的內容
div>
div>
body>
html>
聖杯布局 雙飛翼布局
前言 上班划水偷空了解了一下聖杯布局和雙飛翼布局，一聽這兩個名字，覺得不明覺厲，其實就是三欄布局，左右兩邊的盒子寬度固定，中間的盒子寬度自適應。以下內容均是總結網際網路上別人的文章。覺得有意思就記錄一下。聖杯布局，方法一 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...