三个div中间的可以缩放

结构：

<div class="box">
    <div class="left"></div>
    <div class="cont"></div>
    <div class="right"></div>
</div>

css:样式

.box{
     width: 100%;
     height: 300px;
     float: left;
     position: relative;
     display: inline-block;
 }
.box .left{
    position: absolute;
    left: 0;
    display: inline-block;
    width: 100px;
    height:300px;
    background-color: aqua;
}
.box .right{
    position: absolute;
    right:0;
    top: 0;
    width: 100px;
    height: 300px;
    background-color:red;
}
.cont{
    width: 100%;
    height: 300px;
    background-color: green;
}

CSS3，flex的布局

.box{
    display: flex;
    justify-content: space-between;
}
.box .left{
    width: 100px;
    height:300px;
    background-color: aqua;
}
.box .right{
    width: 100px;
    height: 300px;
    background-color:red;
}
.cont{
    !*width: 100%;*!
    flex: 1;
    margin: 0 10px;
    background-color:gold;
}