圣杯布局跟双飞翼布局的实现，目的都是左右两栏固定宽度，中间部分自适应。

圣杯布局实现的思路是：

1、将最外层的container的padding设置为 padding: 0 220px 0 200px;为左右两块让出空间；

2、将#middle, #left, #right三者设为浮动；

3、将middle的width设置为100%；

4、分别给#left设置margin-left，#right设置margin-right，将left和right拉到与middle同一水平；

5、再用定位将左右位置设置好。

html代码：

css代码：

*, body {            margin: 0;            padding: 0;        }        #container {            padding: 0 220px 0 200px;            background: gray;            height: 400px;            overflow: hidden;        }        #middle, #left, #right {            height: 400px;            min-height: 130px;            float: left;            position: relative;        }        #middle {            width: 100%;        }        #left {            width: 200px;            background: red;            margin-left: -100%;            left: -200px;        }        #right {            width: 220px;            background: orange;            margin-right: -220px;        }

双飞翼布局实现的思路是：

1、将#main, #sub, #extra三者设为浮动；

2、分别给#sub设置margin-left，#extra设置margin-left，将sub和extra拉到与main同一水平

3、将main的width设为100%；

4、在main里加一个main-inner，设置其margin-left、margin-right，为sub、extra腾出位置；

html代码：

css代码：

*, body {            margin: 0;            padding: 0;        }        #main, #main-inner, #sub, #extra {            height: 400px;            min-height: 130px;            float: left;        }        #sub {            width: 200px;            margin-left: -100%;            background: red;        }        #extra {            width: 220px;            margin-left: -220px;            background: orange;        }        #main {            width: 100%;            background: green;        }        #main-inner {            margin-left: 200px;            margin-right: 220px;            background: green;        }

相同：

1、都用了浮动

2、都利用负的margin值，将两边拉到与中间同一水平

3、将中间的width设置为100%

区别：

1、前者用最外层的container的padding为左右腾出空间。后者在中间main里加了一个main-inner，并为左右腾出空间。

2、前者用到定位position，后者则在第2步骤中完成位置设置。