圣杯布局与双飞翼布局

圣杯布局和双飞翼布局实现的是同样的功能，即两侧宽度固定，中间宽度自适应的三栏布局。

圣杯布局

<!-- HTML -->
<div class="header">header</div>
<div class="main">
    <div class="center box">center</div>
    <div class="left box">left</div>
    <div class="right box">right</div>
</div>
<div class="footer">footer</div>

/* CSS */
.header, .footer{
    height: 50px;
    background-color: lightblue;
}
.main {
    height: 500px;
    padding: 0 150px 0 200px;
    min-width: 200px; /* 最小宽度需>=左侧的宽度，否则会导致变形 */
}
.box {
    float: left;
    height: 100%;
}
.center {
    background-color: yellow;
    width: 100%;
}
.left {
    background-color: red;
    width: 200px;
    margin-left: -100%;
    position: relative;
    left: -200px;
}
.right {
    background-color: blue;
    width: 150px;
    margin-left: -150px;
    position: relative;
    right: -150px;
}

双飞翼布局

<!-- HTML -->
<div class="header">header</div>
<div class="main">
    <div class="center box">
        <div class="content">center</div>
    </div>
    <div class="left box">left</div>
    <div class="right box">right</div>
</div>
<div class="footer">footer</div>

/* CSS */
.header, .footer{
    height: 50px;
    background-color: lightblue;
}
.main {
    height: 500px;
}
.box {
    float: left;
    height: 100%;
}
.center {
    background-color: yellow;
    width: 100%;
}
.content {
    margin: 0 150px 0 200px;
}
.left {
    background-color: red;
    width: 200px;
    margin-left: -100%;
}
.right {
    background-color: blue;
    width: 150px;
    margin-left: -150px;
}

双飞翼布局相对圣杯布局，多使用了一个div，但css样式用的比圣杯布局少，无需用到相对定位，思路更简洁。