頁面佈局——聖盃和雙飛翼佈局（固比固）

聖盃佈局來自於文章In Search of the Holy Grail，雙飛翼佈局源於淘寶的UED。

聖盃和雙飛翼佈局是同一種佈局的不同實現方式，實現的都是三欄佈局、兩邊盒子寬度固定、中間盒子自適應（固比固佈局），且中間盒子優先渲染，任何一列都可以最高。

解決方案大體相同，都是三欄全部float:left浮動，區別在於解決中間欄div的內容不被遮擋上，聖盃佈局是中間欄在添加相對定位，並配合left和right屬性，效果上表現爲三欄是單獨分開的（如果可以看到空隙的話），而雙飛翼佈局是在中間欄的div中嵌套一個div，內容寫在嵌套的div裏，然後對嵌套的div設置margin-left和margin-right，效果上表現爲左右兩欄在中間欄的上面，中間欄還是100%寬度，只不過中間欄的內容通過margin的值顯示在中間。

    

假設左側盒子固定寬度爲200px，右側盒子固定寬度爲150px，中、左、右列分別簡寫爲CC、LC和RC。

一、Holy Grail layout

僅需要一個額外的div，非常簡單的CSS，最小的hack，適用於所有現代瀏覽器和IE6。

<div id="header"></div>
<div id="container">
    <div id="center" class="column"></div>
    <div id="left" class="column"></div>
    <div id="right" class="column"></div>
</div>
<div id="footer"></div>

（1）設置padding-left和padding-right分別爲左右側盒子的寬度；
（2）設置中、左、右盒子的寬度及float，footer清除浮動；
（3）放置左盒子：margin-left:-100%;使左盒子與中盒子左側重合，使用相對定位使左盒子左移（？僅設置左盒子position:relative;）；
（4）放置右盒子：margin-right:-150px;；
（5）如果中盒子小於左盒子，佈局會被破壞（IE6不會發生該問題），可設置最小寬度；
（6）對於IE6，margin-left:-100%;將左盒子拉得太遠（整個瀏覽器窗口的寬度），需藉助left定位。

body {
  min-width: 550px;      /* 2x LC width + RC width */
}
#container {
  padding-left: 200px;   /* LC width */
  padding-right: 150px;  /* RC width */
}
#container .column {
  position: relative;
  float: left;
}
#center {
  width: 100%;
}
#left {
  width: 200px;          /* LC width */
  right: 200px;          /* LC width */
  margin-left: -100%;
}
#right {
  width: 150px;          /* RC width */
  margin-right: -150px;  /* RC width */
}
#footer {
  clear: both;
}
/*** IE6 Fix ***/
* html #left {
  left: 150px;           /* RC width */
}

如果每一列之間需要設置padding，

二、雙飛翼佈局

給中間盒子增加額外的div

裏層main-content的作用就是將main定位到合適的位置，並方便設置padding等屬性。

<div id="header"></div>
<div id="center" class="column">
    <div id="inside"></div>
</div>
<div id="left" class="column"></div>
<div id="right" class="column"></div>
<div id="footer"></div>

body {
  min-width: 550px;      /* 2x LC width + RC width */
}
.column {
  float: left;
}
#center {
  width: 100%;
}
#left {
  width: 200px;          /* LC width */
  margin-left: -100%;
}
#right {
  width: 150px;          /* RC width */
  margin-left: -150px; /* RC width */
}
#footer {
  clear: both;
}
/*** IE6 Fix ***/
* html #left {
  left: 150px;           /* RC width */
}