float法
通过使两边的div左右浮动，脱离文档流，再为中间的div设置margin-left,margin-right值为左右div的宽度即可.此处应该注意的是中间div在代码中的位置，应该放在最后。存在问题：在屏幕宽度减少至一定程度后，右边div会错位，另起一行。
/*float法*/
.float .left {
float: left;
height: 200px;
}
.float .center {
margin: 0 400px;
height: 200px;
}
.float .right {
float: right;
height: 200px;
}
display:flex法
<style type="text/css">
.container{
width: 100%;
height: 500px;
display: flex;
}
.div01,.div03{
background: black;
flex: auto;
}
.div02{
background: red;
width: 220px;
}
</style>
<div class="container">
<div class="div01"></div>
<div class="div02"></div>
<div class="div03"></div>
</div>
// 使用"display: flex"声明使用弹性盒布局。
// CSS 属性声明"flex-direction"用来确定主轴的方向:
// row（默认值）主轴为水平方向。排列顺序与页面的文档顺序相同。如果文档顺序是 ltr，则排列顺序是从左到右；如果文档顺序是rtl，则排列顺序是从右到左。
// row-reverse 主轴为水平方向。排列顺序与页面的文档顺序相反。
// column 主轴为垂直方向。排列顺序为从上到下。
// column-reverse 主轴为垂直方向。排列顺序为从下到上。
// CSS 属性"flex-wrap"用来声明当容器中条目的尺寸超过主轴尺寸时应采取的行为。
// nowrap（默认值）容器中的条目只占满容器在主轴方向上的一行，可能出现条目互相重叠或超出容器范围的现象。
// wrap 当容器中的条目超出容器在主轴方向上的一行时，会把条目排列到下一行。下一行的位置与交叉轴的方向一致。
// wrap-reverse 与wrap的含义类似，不同的是下一行的位置与交叉轴的方向相反。