聖杯式布局主要使用三個樣式：float:left，margin-left，以及position:relative。
聖杯式布局為【固定左右，中間寬度自適應】的經典布局。話不多說直接開幹：
header此時有個問題，就是left和right是「蓋住」main的左右兩個部分的，因此給父盒子main
left
right
footer
*注意main要放在第乙個盒子
樣式表：
設定container中三個盒子全浮動，
【main的width為100%】,
此時left和right就被擠下第二行，
通過設定
【margin-left:150px;(left的width)】
可發現left上了main那一行，則可設想通過調整位置即可將left和right移上上一行，
因此設定
【.left和.right】，
叮！很神奇吧。
【container設定】
效果如圖：
再通過最核心的設定position:reletive;（相對定位：可通過偏移量變化位置，但所佔空間位置不變）
設定：【.left和.right】，
重新整理一下，bingo！
最後po**：
body#header,#footer
#container
.left
.main
.right
聖杯式布局
作者森西悠然 關注 2016.07.17 18 58 字數 1500 閱讀 3234 喜歡 32 愛生活，不愛黑眼圈 稍微了解前端的人都知道，聖杯布局和雙飛翼布局是前端面試時必問的問題，因為它既能體現你懂html結構又能體現出你對 iv css布局的掌握，畢竟我們學習css主要就是為了更好地布局帶來...
CSS聖杯布局
本文與之前 css雙飛翼布局 一文有些相似，在html結構上他們可以說是相同的。樣式主要表現為浮動 負邊距 定位。在 css雙飛翼布局 中，為了排開左右兩邊遮擋main元素的區域，是給main又新增了乙個子元素，用子元素來控制main所要顯示內容的寬度與位置，這是乙個不錯的方法，但從結構上來講，我們...
CSS 布局3 聖杯布局
聖杯布局是有 的工程師提出，巧妙的利用我們介紹過的定位技術 負邊距 相對定位 浮動 組合運用。輕鬆實現常見布局。我們在前面介紹過，使用浮動特性，實現三列布局，但是使用div布局，有乙個問題，那就是內容區，在左邊區和右邊區之後渲染。下面我們使用聖杯布局的思路，實現乙個內容區渲染在前的三列布局。1 負邊...