简单！看完就会的Css三栏布局。

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

.demo{
    position:relative;
    width:100%;
    height:300px;
}
.left,.right{
    position:absolute;
    top:0;
    width:100px;
    height:300px;
}
.left{
    left:0;
    background:red;
}
.right{
    right:0;
    background:blue;
}
.center{
    padding:0 100px;
    height:300px;
    background:green;
}

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

.demo{
    width:100%;
    height:300px;
}
.left,.right{
    width:100px;
    height:300px;
}
.left{
    float:left;
    background:red;
}
.right{
    float:right;
    background:blue;
}
.center{
    padding:0 100px;
    height:300px;
    background:green;
}

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

.demo{
    width:100%;
    height:300px;
    display:flex;
}
.left,.right{
    width:100px;
    height:300px;
}
.left{
    background:red;
}
.right{
    background:blue;
}
.center{
    padding:0 100px;
    height:300px;
    background:green;
    flex:1;
}

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

.demo{
    width:100%;
    height:300px;
    display: grid;
    grid-template-rows: 100px;
    grid-template-columns: 100px auto 100px;
}
.left,.right{
    width:100px;
    height:300px;
}
.left{
    background:red;
}
.right{
    background:blue;
}
.center{
    padding:0 100px;
    height:300px;
    background:green;
}