兩邊固定寬度中間自適應：

直接上代碼

第一種：浮動

.left-right-center > div {
    height: 100px;
}
.layout .left {
    float: left;
    width: 300px;
    background: red;
}

.layout .right {
    float: right;
    width: 300px;
    background: blue;
}

.layout .center {
    background: #000000;
}複製代碼

<section class="layout">
    <article class="left-right-center">
        <div class="left"></div>
        <div class="right"></div>
        <div class="center"></div>
    </article>
</section>複製代碼

第二種：絕對定位

.layout .left-center-right > div {
    position: absolute;
    height: 100px;
}

.layout .left {
    left: 0;
    width: 300px;
    background: red;
}

.layout .center {
    left: 300px;
    right: 300px;
    background: #000000;
}

.layout .right {
    right: 0;
    width: 300px;
    background: blue;
}複製代碼

<section class="layout">
    <article class="left-center-right">
        <div class="left"></div>
        <div class="center"></div>
        <div class="right"></div>
    </article>
</section>複製代碼

第三種：flex佈局

.left-center-right > div {
    height: 100px;
}

.left-center-right {
    display: flex;
}

.layout .left {
    width: 300px;
    background: red;
}

.layout .center {
    flex: 1;
    background: #000000;
}

.layout .right {
    width: 300px;
    background: blue;
}複製代碼

<section class="layout">
    <article class="left-center-right">
        <div class="left"></div>
        <div class="center"></div>
        <div class="right"></div>
    </article>
</section>複製代碼

第四種：表格佈局

.left-center-right {
    width: 100%;
    display: table;
}

.left-center-right > div {
    display: table-cell;
    height: 100px;
}

.layout .left {
    width: 300px;
    background: red;
}

.layout .center {
    background: #000000;
}

.layout .right {
    width: 300px;
    background: blue;
}複製代碼

<section class="layout">
    <article class="left-center-right">
        <div class="left"></div>
        <div class="center"></div>
        <div class="right"></div>
    </article>
</section>複製代碼

第五種：網格佈局

.left-center-right > div {
    height: 100px;
}

.left-center-right {
    display: grid;
    width: 100%;
    grid-auto-rows: 100px;
    grid-template-columns: 300px auto 300px;
}

.layout .left {
    background: red;
}

.layout .center {
    background: #000000;
}

.layout .right {
    background: blue;
}複製代碼

<section class="layout">
    <article class="left-center-right">
        <div class="left"></div>
        <div class="center"></div>
        <div class="right"></div>
    </article>
</section>複製代碼

1.每一個方案的優缺點，

浮動：清除浮動脫離文檔流，兼容性好。

定位：快捷，脫離文檔流子元素也脫離文檔流。

flex：比較完美，移動端用的比較多。

表格：兼容性好。

網格：新出技術。