圣杯布局和双飞翼布局

圣杯布局

html结构

<div class="container">
    <div class="main col">Main</div>
    <div class="left col">Left</div>
    <div class="right col">Right</div>
</div>

css样式

.col{
    height: 100%;
    float: left;   /* 三个col都设置float: left,为了把left和right定位到左右部分 */
    position:relative;
}
/*父元素空出左右栏位子: 因为上一步中，左右栏定位成功了，但是中间栏的内容会被遮盖住*/
.container{
    padding:0 200px 0 100px;
}
/*左边栏*/
.left{
    left:-100px;	/* LC width */
    width: 100px;	/* LC width */
    margin-left: -100%; /* 百分比以父元素的width为基准 */
}
/*中间栏*/
.main{
    width:100%;
}
/*右边栏*/
.right{
    right:-200px;
    width: 200px;          /* RC width */
  	margin-left: -200px;  /* RC width */
}

总结：圣杯布局用到了浮动float、负边距、相对定位relative，不添加额外标签.

left的margin-left: -100%使它上移一行，同时right向左移占据left原先位置，同理，right的margin-left: -200px使它上移并靠右

双飞翼布局

html结构

<div class="container">
    <div class="main col ">
        <div class="main_inner">Main</div>
    </div>
    <div class="left col ">Left</div>
    <div class="right col ">Right</div>
</div>

css样式

.col{ 
    height: 100%;
    float: left; /* 把left和right定位到左右部分 */
}
.main{ 
    width:100%;
}
.main_inner{   /* 处理中间栏的内容被遮盖问题 */
    margin:0 200px 0 100px;
}
.left{
    width: 100px;
    margin-left: -100%;
}
.right{
    width:200px;
    margin-left: -200px;
}

和圣杯没多大的区别，就是双飞翼布局比圣杯布局多创建了一个div，但不用相对布局了。