CSS如何实现三列布局？如果两端固定、中间是自适应又该如何做？

<div class="container">
    <div class="left">this is left</div>
    <div class="right">this is right</div>
    <div class="center">
        <div class="middle">
            this is center
        </div>
    </div>
</div>

.container {
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.left {
    float: left;
    width: 400px;
    height: 800px;
    background-color: black;
}
.center {
    width: 100%;
    height: 1000px;
    background-color: yellow;
}
.middle {
    background-color: #fff;
    margin: 0 400px;
    height: 850px;
}
.right {
    float: right;
    width: 400px;
    height: 800px;
    background-color: red;
}

<div class="container">
    <div class="left">this is left</div>
    <div class="right">this is right</div>
    <div class="center">
        this is center
    </div>
</div>

.container {
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.left {
    float: left;
    width: 400px;
    height: 800px;
    background-color: black;
}
.center {
    overflow: hidden;
    height: 1000px;
    background-color: yellow;
}
.right {
    float: right;
    width: 400px;
    height: 800px;
    background-color: red;
}

<div class="container"> <div class="left">this is left</div> <div class="center"> this is center </div> <div class="right">this is right</div> </div>

.container {
    width: 100%;
    height: 100%;
    position: relative;
}
.left {
    position: absolute;
    left: 0;
    top: 0;
    width: 400px;
    height: 800px;
    background-color: black;
 }
.center {
    /* 如果没有这一句，那么，center这个div的文字就不会自动换行 */
    width: auto;
    margin: 0 400px;
    height: 1000px;
    background-color: yellow;
}
.right {
    position: absolute;
    top: 0;
    right: 0;
    width: 400px;
    height: 900px;
    background-color: red;
}

<div class="grid">
    <div id="div-middle-02">
        <div id="middle-wrap-02"><span>div-middle</span></div>
    </div>
    <div id="div-left-02"><span>div-left</span></div>
    <div id="div-right-02"><span>div-right</span></div>
</div>

#div-middle-02 {
    float: left;
    background-color: #fff9ca;
    width: 100%;
    height: 80px;
}
#div-left-02 {
    float: left;
    background-color: red;
    width: 150px;
　　/* 重点看这里 */
    margin-left: -100%;
    height: 50px;
}
 
#div-right-02 {
    float: left;
    background-color: yellow;
    width: 200px;
　　/* 重点看这里 */
    margin-left: -200px;
    height: 50px;
}
#middle-wrap-02 {
    margin: 0 200px 0 150px;
    background-color: pink;
}