聖杯布局——三列布局
1、html結構中——先主體內容後側邊欄；
2、兩側固定寬度，中間內容寬度設定width: 100%;
3、主體內容和左右側邊欄分別加浮動float: left;
4、左側設定margin-left: -100%;將左側拉到最左邊；右側設定margin-left: -右側邊寬度；
5、將中間露出來：在外面的大盒子上設定padding: 0 右側邊的寬度 0 左側邊寬度；
6、分別為左側邊和右側邊設定position:relative; 左側設定left:-左側邊的寬度;還原左側邊。
7、右側邊設定right:-右側邊寬度;還原右側邊
示例2
中間內容
左邊內容
右邊內容
聖杯布局（三欄布局）
聖杯布局也就是 左右固定寬度，中間自適應的布局樣式 html布局 注意 一定是中間部分寫在最上面 header h4 header內容 h4 header div class container div class middle h4 中間彈性 h4 div div class left h4 左邊...
三欄布局之聖杯布局
這篇部落格主要是介紹一下三欄布局的聖杯布局 聖杯布局與雙飛翼布局實際上是差不多的，他們實現的都是三欄布局，兩邊的盒子寬度固定，中間的盒子自適應 也就是我們常說的固比固布局 兩個布局方式實現的效果是一樣的，區別在於實現的思想 在了解了什麼是三欄布局之後，我們主要來看一下聖杯模式的實現 首先，先確定ht...
三欄布局之聖杯布局 雙飛翼布局
聖杯布局和雙飛翼布局是經典的三欄布局。實現了左右兩側固定中間自適應的布局。聖杯布局主要是利用float 相對定位 容器的padding來完成布局。doctype html content type content text html charset utf 8 test page title htm...