左右固定，中间自适应，纯css的实现方式
<div class="main">
<div class="left">200px</div>
<div class="right">300px</div>
<div class="middle">auto</div>
</div>
<style>
div[class*="main"]{margin-top: 20px;}
.main div{height: 50px;}
.main .left{width: 200px;float: left;background: red;}
.main .right{width: 300px;float: right;background: green}
.main .middle{margin-left: 210px;margin-right: 310px;background: grey}
</style>
<div class="main1">
<div class="left">200px</div>
<div class="right">20%</div>
<div class="middle">auto</div>
</div>
<style>
.main1 div{height: 50px;}
.main1 .left{width: 200px;float: left;background: red;}
.main1 .right{width: 20%;float: right;background: green}
.main1 .middle{margin-left: 210px;margin-right: 21%;background: grey}
</style>
<div class="main2">
<div class="left">200px</div>
<div class="middle">auto</div>
<div class="right">20%</div>
</div>
<style>
.main2{display: flex;}
.main2 .left{width: 200px;background: red;}
.main2 .right{width: 20%;background: green}
.main2 .middle{background: grey;flex: 1}
</style>
<div class="main3">
<div class="left">200px</div>
<div class="middle">auto</div>
<div class="right">20%</div>
</div>
<style>
.main3 .left{width: 200px;background: red;float: left;}
.main3 .right{width: 20%;background: green;float: left;}
.main3 .middle{background: grey;float: left;width: calc(100% - 200px - 20%)}
</style>
