两边固定中间自适应布局

1.flex布局

<div class="parents">
 <div class="left"></div>
 <div class="center"></div>
 <div class="right"></div>
</div>

.parents {
 display: flex;
 height: 100px;
}

.left,.right {
 background-color: pink;
 height: 100px;
 width: 200px;
}

.center {
 flex: 1;
 height: 100px;
 background-color: wheat;
}

2. float

// 注意html布局,center盒子必须放在最后面
<div class="left"></div>
<div class="right"></div>
<div class="center"></div>

.left,.right{
 height: 200px;
 width: 200px;
 background-color: pink;
}

.left {
 float: left;
}

.right {
 float: right;
}

.center {
 height: 300px;
 background-color: wheat;
}

3. position 定位

<div class="parents">
 <div class="left"></div>
 <div class="center"></div>
 <div class="right"></div>
</div>

.parent {
 position: relative;
}

.right,.left{
 width: 100px;
 height: 100px;
 background-color: pink;
}

.left {
 position: absolute;
 left: 0;
 top: 0;
}

.center {
 height: 100px;
 background-color: wheat;
}

.right {
 position: absolute;
 top: 0;
 right: 0;
}