经典布局——圣杯布局和双飞翼布局

圣杯布局

圣杯布局是由国外的Kevin Cornell提出的一个布局模型概念，是一种相对布局

布局要求

三列布局，中间宽度自适应，两边定宽

中间栏要在浏览器中优先展示渲染（在写框架时候先写中间栏）

允许任意列的高度最高（高度设置为任意高但不影响其他列和整体的效果）

用最简单的CSS、最少的HACK语句

实现过程

• DOM结构

<div class="container">
    <div class="middle">这是中间页面</div>
    <div class="left">这是左页面</div>
    <div class="right">这是右页面</div>
</div>

• 设置基本样式

        .container {
            padding: 0 300px 0 200px;
        }
        .middle, .left, .right {
            min-height: 130px;
        }
        .middle {
            width: 100%;    /* 自适应 */
            background: #f00;
        }
        .left {
            width: 200px;
            background: #0f0;
        }
        .right {
            width: 300px;
            background: #00f;
        }

效果：左右分别空出200px和300px的区域

• 将主体的三个子元素设置左浮动

        .middle, .left, .right {
            min-height: 130px;
            float: left;
        }

效果：因为中间页面宽度为100%，所以独占一行

• 设置左右页面的负外边距

        .left {
            width: 200px;
            background: #0f0;
            margin-left: -100%;
        }
        .right {
            width: 300px;
            background: #00f;
            margin-left: -300px;
        }

负的margin-left会让元素沿文档流向左移动，如果负值较大就会一直移动到上一行。

设置左页面的margin-left为-100%，会使左页面向左移动一整行的宽度，由于左页面左边是父元素的边框，所以左页面会跳到上一行左移，并左移一行至开头位置，覆盖住中间页面的左边部分。

左页面上移后，右页面就会处于该行的开头位置，设置margin-left为负的宽度，右页面就会左移至上一行的末尾

效果：

• 使用相对定位移动左右两个页面至留白部分

        .middle, .left, .right {
            min-height: 130px;
            float: left;
            position: relative;
        }
        .middle {
            width: 100%;    /* 自适应 */
            background: #f00;
        }
        .left {
            width: 200px;
            background: #0f0;
            margin-left: -100%;
            left: -200px;
        }
        .right {
            width: 300px;
            background: #00f;
            margin-left: -300px;
            right: -300px;
        }

效果：

双飞翼布局

圣杯布局经过改良后得出双飞翼布局

去掉相对布局，只需要浮动和负边距

实现过程

• DOM结构：给middle里面添加一个内容标签middle-inner

<div class="container">
    <div class="middle">
        <div class="middle-inner">这是中间页面</div>
    </div>
    <div class="left">这是左页面</div>
    <div class="right">这是右页面</div>
</div>

• 设置基本样式：设置middle的左右margin值为左右侧边栏的宽度

        .middle, .left, .right{
            min-height: 130px;
            float: left;
        }
        .middle{
            width: 100%;
        }
        .middle-inner{
            margin: 0 300px 0 200px;
            background: #f00;
        }
        .left{
            width: 200px;
            background: #0f0;
        }
        .right{
            width: 300px;
            background: #00f;
        }

效果：

• 设置左右页面的负外边距

        .left{
            width: 200px;
            background: #0f0;
            margin-left: -100%;
        }
        .right{
            width: 300px;
            background: #00f;
            margin-left: -300px;
        }

效果：