圣杯布局和双飞翼布局详解与实现

功能

圣杯布局和双飞翼布局解决的是同一个问题，即两侧顶部宽、自适应中柱的三柱布局。中间的列应该放在文档流的前面，以优先渲染。

差异

圣杯布局，为了不遮挡中间div的内容，为中间div设置左右padding-left和padding-right后，左右div使用相对布局位置：relative 。并分别匹配right和left属性，这样左右两列div移动后不会遮挡中间div。双飞翼布局中，为了不遮挡中间div的内容，直接在中间div内部创建了一个子div来放置内容。在 子div 中，margin-left 和 margin-right 用于为杂项的左右列保留空间。

实现代码

圣杯布局

＃高清{ 高度：50px； 背景：#666； 文本对齐：居中； } #bd{ /*通过添加负边距将左右列放置在正确的位置，此代码应该纠正中间列的位置*/ 内边距：0 200px 0 180px； 高度：100px； } ＃在中间{ 向左飘浮; width:100%;/*从左列向上到第一行*/ 高度：100px； 背景：蓝色； } ＃左边{ 向左飘浮; 宽度：180px； 高度：100px；左边距：-100%； 背景：#0c9； /*中间列的位置调整后，左边列的位置也向右移动，通过左边的相对定位恢复到正确的位置*/ 职位：亲属； 左：-180px； } ＃正确的{ 向左飘浮; 宽度：200px； 高度：100px； 左边距：-200px； 背景：#0c9； /*中间列的位置调整后，右边列的位置也相应向左移动，通过右边的相对定位恢复到正确的位置*/ 位置：相对； 右：-200px； } #footer{ 高度：50px； 背景：#666； 文本对齐：居中； }

双翼布局

＃高清{ 高度：50px； 背景：#666； 文本对齐：居中； } ＃在中间{ 向左飘浮; width:100%;/*左列上升到第一行*/ 高度：100px； 背景：蓝色； } ＃左边{ 向左飘浮; 宽度：180px； 高度：100px；左边距：-100%； 背景：#0c9； } ＃正确的{ 向左飘浮; 宽度：200px； 高度：100px； 左边距：-200px； 背景：#0c9； } /*给内层div加上边距，把内容放在中间一栏，实际上整个背景还是100%*/ ＃里面{ 边距：0 200px 0 180px； 高度：100px； } #footer{ 准备好：两者； /*记得要流畅*/ 高度：50px； 背景：#666； 文本对齐：居中； }