經典三列布局，也叫聖杯布局（holy grail of layouts ），在國內也叫雙飛翼布局。它的布局有幾點要求：
1、三列布局，兩邊寬度固定，中間寬度自適應；
2、中間欄要在瀏覽器中優先展示渲染；
3、允許任意列的高度最高；
4、要求只用乙個額外的div標籤；
5、要求用最簡單的css、最少的hack語句。
實現方式：
首先需要進行三列布局，因為中間欄要優先渲染，所以要寫在最前面。假定需要實現的是左側寬度為200px，右側寬度為150px，中間自適應寬度。html**如下:
<只多了一層額外的div，即id=container。它的css**如下：div
id="header"
>#header
div>
<
div
id="container"
>
<
div
id="center"
class
="column"
>#center
div>
<
div
id="left"
class
="column"
>#left
div>
<
div
id="right"
class
="column"
>#right
div>
div>
<
div
id="footer"
>#footer
div>
body #container #container .column #center #left #right #footer #header,#footer下面我們來分布觀察它的實現邏輯：/** ie6 fix *
*/* html #left
先寫header、container、footer三個div。
<將container的左右內邊距分別設定為200px和150px。此時頁面看起來就是這樣：div
id="header"
>#header
div>
<
div
id="container"
>
div>
<
div
id="footer"
>#footer
div>
此時有了基本的框架，可以把三欄塞進去。
<注意：這裡center欄要寫在前面，然後依次是左欄和右欄。div
id="header"
>#header
div>
<
div
id="container"
>
<
div
id="center"
class
="column"
>#center
div>
<
div
id="left"
class
="column"
>#left
div>
<
div
id="right"
class
="column"
>#right
div>
div>
<
div
id="footer"
>#footer
div>
接著給每欄新增上合適的寬度，並將它們設定為浮動。同時要清楚footer的浮動，以免它跟上面三欄一起浮動。
#contianer .column #center #left #footer注意：這裡中間欄的100%寬度是基於它的父容器container的寬度而言的。由於container設定類內邊距，因此中間欄向左浮動到碰到container的內邊距。 但左右兩欄由於排在中間欄的後面，且因為空間不夠被擠到了中間欄的下面，此時頁面如下圖所示：
中間欄已經就位，剩下的就是把左右兩欄放上去。先讓左欄上去。
首先，將左欄的外邊距設為-100%（相對父容器container而言），此時左欄負外邊距等於中間欄的寬度，這樣一來，如果中間欄寬度（即100%對應的寬度）≥左欄寬度（200px），左欄將會向上浮動。這就是為什麼開頭要將body最小寬度設為550的原因。因為左欄上去後，頁面最小寬度=200（左內邊距）+100%（中間欄寬度）+150（右內邊距）+200（左欄寬度）-100%（左欄負邊距）=550px。
左欄上浮，與中間欄交疊在一起，並佔據了左邊。而右欄由於左欄上浮，自動向前浮動到了原先左欄的位置。此時頁面樣式如下：
接著我們要用到相對定位的屬性（relative），並設定乙個與左欄等寬的偏移量：
#container .column#left可以看到，因為所有欄目都是相對定位，左欄設定right屬性，使得它相對自己向左偏移了200px。此時頁面如下圖所示:
最後，我們把右欄放上去。給右欄設定乙個與它等寬的負右邊距即可，右欄就可以上去到右外邊距的位置。
右欄上去後，頁面最小寬度=200（左內邊距）+100%（中間欄寬度）+150（右內邊距）+200（左欄寬度）-100%（左欄負邊距）+150（右欄寬度）-150（右欄右負外邊距）=550px。
從這裡也可以知道，為什麼要設定 body的min-width=550px。
#right此時頁面如下：
關於「聖杯布局」。
特此感謝。
實現聖杯布局
聖杯布局特點 左右兩欄都是固定的寬度，中間欄的寬度隨著瀏覽器的變化而變化 在網頁載入過程中先載入中間主體在載入兩邊部分 效果 例項 左邊右邊 疑難點1.不要給container盒子設定寬度 因為他會繼承瀏覽器的寬度，如果設定了盒子寬度100 那麼我們在使用內邊距的時候就會出現滾動條，這個時候可以使用...
聖杯布局 浮動實現
聖杯布局是一種很常見的css布局。他要求 1 上部和下部各自占領螢幕所有寬度。2 上下部之間的部分是乙個三欄布局。3 三欄布局兩側寬度不變，中間部分自動填充整個區域。4 中間部分的高度是三欄中最高的區域的高度。浮動實現 12 3 1 填充三欄這一步驟，首先給底部區域清除浮動，防止跟隨上邊的區域一起浮...
《前端》實現聖杯布局
最近正好碰到了寫這種布局，一直沒有總結過正好借這次機會總結一波，同時加強一下自己的理解。聖杯布局和雙飛翼布局作為經典的三欄式布局是面試中的常客。兩種布局達到效果上基本相同，都是兩邊兩欄寬度固定，中間欄寬度自適應。在html結構上中間欄在最前面保證了最先渲染中間提公升效能 因為這兩種布局都比較老，我認...