等高布局：
让left,center,right三个盒子根据最高的盒子进行等高布局，由于不知道哪个盒子最高，故给每一个盒子都设置等高布局的核心样式（padding-bottom: 10000px; margin-bottom: -10000px;）。
等高布局的原理：
当给较低子元素一个padding-bottom的值，随着这个值得变大，整个父级的高度会随之变大，这个时候给他一个margin-bottom的负值，就会减少该子元素占用父级元素的margin空间，当减少到刚小于最高高度的盒子的后，即使margin-bottom的负值继续变化，整个父级的高度也不会再变化，因为这个时候整个父级的高度已经被最高高度的盒子撑开，即到达了等高的效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>等高布局</title>
<link rel="stylesheet" href="./reset.css">
<style>
.outer{
padding: 0 100px;
overflow: hidden;
}
.center{
/*padding: 0px 100px;*/
/*height: 100px;*/
width: 100%;
float: left;
background-color: red;
/*等高布局：*/
padding-bottom: 10000px;
margin-bottom: -10000px;
}
.left{
float: left;
width: 100px;
background-color: yellowgreen;
margin-left: -100%;
position: relative;
left: -100px;
/*等高布局：*/
padding-bottom: 10000px;
margin-bottom: -10000px;
}
.right{
float: left;
width: 100px;
/*height: 100px;*/
background-color: #4c71ff;
margin-left: -100px;
position: relative;
right: -100px;
/*等高布局：*/
padding-bottom: 10000px;
margin-bottom: -10000px;
}
</style>
</head>
<body>
<div class="outer">
<div class="center">
center <br>
center
</div>
<div class="left">
left <br>
left <br>
left <br>
left <br>
left <br>
left <br>
left <br>
</div>
<div class="right">
right
</div>
</div>
</body>
</html>
