7. 等高、双飞翼和圣杯布局

(一) 等高布局

多列的情况下，每列内容不一样，内容少的列将以内容高的列为基准，设置自己的高度。
利用martin-bottom负值与padding-bottom配合实现。

* {
    margin: 0;
    padding: 0;
}

#parent {
    border: 1px black solid;
    overflow: hidden;
    background-color: slategray;
}

#box1 {
    float: left;
    background-color: rosybrown;
    margin-bottom: -2000px;
    padding-bottom: 2000px;
    color: #fff;
}
#box2{
    float: right;
    background-color:salmon;
    margin-bottom: -2000px;
    padding-bottom: 2000px;
    color: #fff;
}

<div id="parent">
    <div id="box1">
        <p>11111111111111111</p>
        <p>11111111111111111</p>
        <p>11111111111111111</p>
        <p>11111111111111111</p>
        <p>11111111111111111</p>
        <p>11111111111111111</p>
    </div>
    <div id="box2">
        <p>11111111111111111</p>
    </div>
</div>

(二) 双飞翼布局

利用浮动实现。
三列布局，左右固定，中间自适应。

.header {
   height: 100px;
    background-color: red;
}

.center,.left,.right {
    float: left;
    height: 300px;
}

.center {
    width: 100%;
    background-color: slategray;
}

.content {
    margin: 0 150px 0 100px;
}

.left {
    width: 100px;
    margin-left: -100%;
    background-color: steelblue;
}

.right {
    width: 150px;
    margin-left: -150px;
    background-color: turquoise;
}

<div class="header">头部</div>
<div class="center">
    <div class="content">中间</div>
</div>
<div class="left">左边</div>
<div class="right">右边</div>

(三) 圣杯布局

双飞翼布局的不同实现方法

.header {
   height: 100px;
    background-color: red;
}

.container {
    overflow: hidden;
    padding: 0 150px 0 100px;
}
.center,.left,.right{
    float: left;
    height: 200px;
}
.center {
    width: 100%;
    background-color: slategray;
}

.left {
    width: 100px;
    margin-left: -100%;
    position: relative;
    left: -100px;
    background-color: steelblue;
}

.right {
    width: 150px;
    margin-right: -150px;
    background-color: turquoise;
}

<div class="header">头部</div>
<div class="container">
    <div class="center">中间</div>
    <div class="left">左边</div>
    <div class="right">右边</div>
</div>