1、什麼是聖杯布局
如下圖，聖杯布局就是左右兩個div寬度固定，中間div自適應的三欄布局。
2、文件結構
center center center center center center center center
left left left left left left left left
right right right right
把中間欄放在文件流前面，以優先渲染。
4、實現原理
① 給left、center、right三個div都設定左浮動float:left，由於中間欄需要自適應，因此
要給center寬度設定為100%，此時三個div的排列如下（順序為center ——> left ——> right）：
② 要把left往上提，此時可以給left設定margin-left值為center的寬度來使left上移，提公升到上一層。
同樣給right設定margin-left值為right本身的寬度，來使right提公升到上一層。效果如下：
③由上圖可以看出，center元素的子元素被遮擋了，此時我們可以給父元素container設定padding-left為left元素的寬度，設定padding-right為right元素的寬度，這樣就可以確保center寬度還是100%的情況下子元素也不會被遮擋。結果如下：
④從上圖看這還不是我們需要的結果，還需要把left往左移，把right往右移，因此可以對left和right使用相對定位來達到目的。
最終**如下：
// 為了安全起見，給body設定乙個最小寬度
body
.container
.center, .left, .right
.center
.left
.right
應且中間部分優先渲染的三欄布局。
兩者的解決方案前半部分是相同的，也就是三欄全部float浮動，但左右兩欄加上
負margin讓其跟中間欄併排，以形成三欄布局。
不同在於解決「中間欄不被遮擋」問題的思路不一樣：
聖杯布局： 給父元素設定padding-left和padding-right，然後給左右兩欄使用
相對定位配合left和right屬性，來實現左右兩欄向兩邊移動後不遮擋中間部分。
雙飛翼布局：為了中間div不被遮擋，直接在中間div中建立乙個子div用於放置內容，
在子div中設定margin-left和margin-right屬性為左右兩欄div留出位置。
最終**如下：
center center center center center center center center
center center center center center center center center
left left left left left left left left
left left left left left left left left
right right right right
right right
body
.container
.center, .left, .right
.center
.left
.right
#center_child
CSS 聖杯 雙飛翼布局
html結構 123 123123 css container 把左右兩邊距離空出來 containercenter 設定widh為100 即充滿整個容器 center浮動 設定left，center，right左浮動。清除container浮動，保證後面的div正常布局 left,center,r...
CSS聖杯布局（雙飛翼布局）
我在網上看了有關於css聖杯布局的文章，有很多直接丟 給效果，看得我雲裡霧裡。首先按我的理解來講述一下聖杯布局吧。首先他的作用就是 像 網那樣，中間先渲染，兩邊後渲染，其次中間的內容是自適應高度的。最好的例子就是 網了。樣式 1.三列布局 2.中間板塊先渲染，自適應高度寬度 3.兩邊定寬 那我們就開...
CSS布局 聖杯布局 雙飛翼布局
聖杯布局和雙飛翼布局解決的都是兩邊頂寬 中間自適應的三欄布局問題，要實現中間部分優先渲染。先上兩個demo。聖杯布局 雙飛翼布局 兩者的異同 首先如開題所述，兩種布局解決的問題是一樣的，只是實現方式有些微小的差別 兩者都採用了向左浮動的方式，還用實現布局的重點都是負邊距的使用 聖杯布局使用固定的左右...