简述

圣杯布局和双飞翼布局都是css比较常用的布局，两者的特点都是两边的宽度固定，中间自适应。两者都遵循以下要求：

左右两列宽度固定，中间宽度自适应
中间部分DOM结构在前，以便先行渲染
允许三列中的一列称为最高列。
只允许额外多一个div

圣杯布局

DOM结构

<div class='container'>
    <div class='center coloum'>#center</div>
    <div class='left coloum'>#left</div>
    <div class='right coloum'>#right</div>
</div>

css样式

body{
    min-width:600px;
}
.container{
    overflow:hidden;
}
.coloum{
    float:left;
    height:200px;
}
.center{
    padding:0 200px;
    width:100%;
    background: gold;
}
.left,.right{
    width:200px
}
.left{
    margin-left:-100%;
    position:reletive;
    left:-200px;
     background: green;
}
.right{
   margin-right:-200px;
   background: hotpink;
}

注意事项

要在body加上min-width，min-width=左右两列的宽度+reletive:left的宽度，这里为600px，不加min-width当屏幕宽度小于600px时会混乱。
要在center中加width:100%,因为此时center为浮动元素，如果不加100%，此时它的宽度为内容的宽度。

双飞翼布局

DOM结构

<div class='container'>
    <div class='wrapper coloum'>
        <div class='center'>#center</div>
    </div>
    <div class='left coloum'>#left</div>
    <div class='right coloum'>#right</div>
</div>

** CSS样式**

body:{
    min-width:600px
}
.container{
    overflow:hidden;
}
.coloumn{
    float:left;
}
.wrapper{
    width:100%;
}
.center{
    margin:0 200px;
}
.left{
    width:200px;
    margin-left:-100%;
}
.right{
     width:200px;
     margin-left:-200px;
}

如果想到三列高度一样高，及整个container的高度随着最高盒子的高度一起变化。在coloumn的样式添加以下属性：

padding-bottom:10000px;
margin-bottom:-10000px;

首先padding-bottom将内容盒子自身推开了，然后在用margin-bottom将父盒子缩回到原来的内容实体的高度。所以看上去3个div高度相等