圣杯布局和双飞翼布局

圣杯布局和双飞翼布局也是两边定宽，中间自适应的三栏布局。并且中间栏要放在父元素的第一儿子位置，以优先渲染。这么做的好处就是可以让更为重要的中间部分优先渲染。

两者比较

圣杯布局

思路

• 左中右三个元素分别左浮动。
• 中间元素占据第一位置优先渲染，设置该元素 width 为 100%
• 左元素设置左边距为-100%以使得左元素上升一行并且处于最左位置，右元素设置左边距为自身宽度的负值使得右元素上升一行处于最右位置。
• 设置父元素的左右 padding 为左右两个元素留出空间，以展示中间元素内容。
• 设置左右元素为相对定位，左元素的 left 和右元素的 right 为内边距的宽度的负值。

代码

<div class="box">
    <div class="middle">中间</div>
    <div class="left">左边</div>
    <div class="right">右边</div>
</div>

.box {
    overflow: hidden;
    padding: 0 210px;
}
.middle {
    float: left;
    width: 100%;
    height: 200px;
    background-color: lightgray;
}
.left {
    float: left;
    width: 200px;
    height: 200px;
    background-color: gray;
    margin-left: -100%;
    position: relative;
    left: -210px;
}
.right {
    float: left;
    width: 200px;
    height: 200px;
    background-color: gray;
    margin-left: -200px;
    position: relative;
    right: -210px;
}

双飞翼布局

思路

• 左中右三个元素分别左浮动。
• 中间元素占据第一位置优先渲染，设置该元素 width 为 100%
• 左元素设置左边距为-100%以使得左元素上升一行并且处于最左位置，右元素设置左边距为自身宽度的负值使得右元素上升一行处于最右位置。
• 设置中间元素的子元素左右边距为左右元素留空位，以展示中间元素内容。

代码

<div class="box">
    <div class="middle">
        <div class="content">中间</div>
    </div>
    <div class="left">左边</div>
    <div class="right">右边</div>
</div>

.box {
    overflow: hidden;
}
.middle {
    float: left;
    width: 100%;
}
.middle .content {
    margin: 0 210px;
    height: 200px;
    background-color: lightgray;
}
.left {
    float: left;
    width: 200px;
    height: 200px;
    background-color: gray;
    margin-left: -100%;
}
.right {
    float: left;
    width: 200px;
    height: 200px;
    background-color: gray;
    margin-left: -200px;
}