圣杯布局和双飞翼布局

一、圣杯布局

主要html代码：

主要步骤：
（1）main ,sub ,extra三个区块都设置左浮动，父元素清除浮动，main区块设置100%的宽度，sub和extra左右两区块需要定宽;
（2）sub区块设置margin-left ：-100%（父元素宽度的100%）,使其覆盖main区块的左边区域;
（3）extra区块设置margin-left ：负自身宽度,使其覆盖main区块的右边区域;
至此，浏览器中效果如下图：

左右侧边栏覆盖中间栏

（4）给三大块的父元素，也即 #container设置左右padding;

#container{
padding-left:210px;
padding-right:210px;
}

此时，浏览器中效果如下：

为左右侧边栏空出位置

（5）sub和extra区块设置相定位调整位置；

.sub{
    position: relative;
    left:-210px;
}
.extra{
    position: relative;
    right:-210px;
}

圣杯布局就完成啦~~

relative定位调整左右侧边栏位置

二、双飞翼布局

双飞翼布局的前三步和圣杯布局的前三步是一样的，只是对左右侧边栏覆盖中间栏时的处理方式不同。
圣杯布局是通过给三栏的父元素设置左右padding来实现，而双飞翼布局则是通过给中间栏添加子div,再给该div设置左右margin来实现，这样就不需要使用定位。
主要html代码：

具体步骤：
（1）（2）（3）步和圣杯布局一致，先实现下图效果。

左右侧边栏覆盖中间栏

（4）给inner-main区块设置左右margin,为了方便观察，这里填充了蓝色背景色。

.inner-main{
    margin-left: 210px;
    margin-right:210px;
    height:100%;
}

双飞翼布局最终效果如下：

---

© 本文归饥人谷和本人所有，如需转载请注明来源。