中間層100%佔滿同一高度空間的整層寬度，左右兩層被擠出中間層所在區域時， 使用margin-left的負值將左右層拉回與中間層同一高度的空間；
接著調整左右兩層到指定位置；
最後使用margin或padding屬性調整中間層被左右層佔住的顯示區。
聖杯布局採用乙個父層包含中間、左右三個子層，設定父層的padding值騰出左右兩層的顯示區， 並對左右兩層使用relative和left、right值調整位置。
html結構：
class="container">
class="main">
div>
class="left">
div>
class="right">
div>
div>
.container
.main
.left
.right
html結構：
class="container">
class="main">
class="inner">
div>
div>
class="left">
div>
class="right">
div>
div>
.container
.main
.inner
.right
聖杯布局與雙飛翼布局
聖杯布局和雙飛翼布局都是實現的三欄布局，兩邊的盒子寬度固定，中間盒子自適應，也就是我們常說的固比固布局。它們實現的效果是一樣的，差別在於其實現的思想。聖杯布局的出現是來自於a list part上的一篇文章in search of the holy grail。比起雙飛翼布局，它的起源不是源於對頁面...
雙飛翼布局與聖杯布局
怎麼設定min width我還沒搞懂 稍微說明一下 html 中 middle部分首先要放在container的最前部分。然後是left,right 1.將三者都 float left 再加上乙個position relative 因為相對定位後面會用到 2.middle部分 width 100 佔...
聖杯布局與雙飛翼布局
聖杯布局和雙飛翼布局都是兩邊固定，中間內容自適應，當中列要完全顯示，中間列要優先載入 聖杯布局首先要用float搭建完整的布局框架，讓middle，left，right都浮動，給left設定乙個margin left 100 此時left區域上去並靠左，給right設定乙個margin left 2...