經常有需求，所以就總結一下，有需要的時候直接複製貼上啦…
布局的原理是margin負值法。首先需要在center元素外部包含乙個div，包含div需要設定float屬性使其形成乙個bfc，並設定寬度，並且這個寬度要和left塊的margin負值進行配合，具體原理參考這裡。這裡對聖杯布局解釋特別詳細。
html:
id = "wrap">
id = "center">div>
div>
id = "left_margin">div>
id = "right_margin">div>
css:
/*第1種寫法*/
#wrap
#wrap
#center
#left_margin,#right_margin
#left_margin
#right_margin
/*第2種寫法*/
*#wrap
#wrap
#center
#left_margin,#right_margin
#left_margin
#right_margin
#left_margin
css 兩邊固定，中間自適應布局
參考 相同點 利用布局，可優先渲染主要部分 不同點 聖杯布局 借助的是其他非主要元素覆蓋了其父元素的padding值所佔據的寬度，同乙個杯子，非主要元素其只是佔據了全部容器的padding值部分 雙飛翼布局 給主要部分main wrap新增乙個外層元素main，其他非主要元素所佔據的空間是主要部分 ...
css中間固定寬度，兩邊自適應寬度
html5 css main1 left1,right1 left1 inner,right1 inner 借助於負的margin來實現的，首先我們在中間列定好固定值，因為此值是不會在改變的，接著對其進行左浮動 那麼關鍵地主是在左右邊欄設定地方，這種方法是將其都進行50 的寬度設定，並加上中負的左邊...
經典布局 兩邊固定中間自適應
方法一 左右使用浮動，中間設定margin left和margin right 這種方式很簡單，就是讓左邊的左浮動，右邊的右浮動，然後通過設定中間的margin將內容從兩邊拉回來。例項效果圖.png 如下 我是右邊 我是中間 方法二在container中，我們將middle放在left和right的...