两边固定宽度中间自适应：

直接上代码

第一种：浮动

.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：比较完美，移动端用的比较多。

表格：兼容性好。

网格：新出技术。