如果將布局結構拆分成容器、左固定、中適應、右固定四部分，在聖杯布局中，左固定、中適應和右固定三部分都位於容器中；而在雙飛翼布局中，只有中適應位於容器中，左固定和右固定兩部分位於容器外。
在**中結構如下：
聖杯布局
//css基本樣式（每種方法都具備）
.container
.left, .right
.center
將容器左右padding值設為和左右固定的width相同的值，左固定、右固定和中適應向左浮動，並且通過將margin-left和margin-right設為負的寬度值，使其左固定和右固定貼近容器的兩邊。
.container
.left, .right
.left
.right
.center
左固定、中適應和右固定都向左浮動，中適應的寬度設為calc(100% - 200px)
.left, .center, .right
.center
.container
.center
.container
.left
.right
.center
容器，左固定，右固定都向左浮動，容器寬度設為100%，中適應的左右margin設為左右固定的寬度，左固定margin-left：-100%；右固定margin-left設為負的右固定width。
.container
.center
.left, .right
.left
.right
經典布局 兩邊固定中間自適應
方法一 左右使用浮動，中間設定margin left和margin right 這種方式很簡單，就是讓左邊的左浮動，右邊的右浮動，然後通過設定中間的margin將內容從兩邊拉回來。例項效果圖.png 如下 我是右邊 我是中間 方法二在container中，我們將middle放在left和right的...
css 兩邊固定，中間自適應布局
參考 相同點 利用布局，可優先渲染主要部分 不同點 聖杯布局 借助的是其他非主要元素覆蓋了其父元素的padding值所佔據的寬度，同乙個杯子，非主要元素其只是佔據了全部容器的padding值部分 雙飛翼布局 給主要部分main wrap新增乙個外層元素main，其他非主要元素所佔據的空間是主要部分 ...
三欄布局（兩邊固定，中間自適應）
我的答案 1 div class left 1 div 2 div class center 2 div 3 div class right 3 div 4 style text type css 5 div 6 left,right 7 center 8 style 網上答案 主要有定位，浮動和通...