三列布局（左右宽度固定，中间自适应）的五种解决方案

1.float浮动布局

html:

    <section class="layout float">
        <div class="left"></div>
        <div class="right"></div>
        <div class="center"></div>
    </section>

css

         <style>
            *{
                margin: 0;
                padding: 0;
            }
            .layout.float>div{
               height: 100px;
            }
            .layout.float .left{
                float: left;
                width: 300px;
                background: red;
            }
            .layout.float .right{
                float: right;
                width: 300px;
                background: blue;
            }
            .layout.float .center{
                margin-left: 300px;
                margin-right: 300px;
                background: yellow;
            }
        </style>

2.定位布局

html：

    <section class="layout absolute">
        <div class="left"></div>
        <div class="center"></div>
        <div class="right"></div>
    </section>

css:

         <style>
            *{
                margin:0;
                padding:0;
            }
            .layout.absolute>div{
                height: 100px;
                position:absolute;
            }
            .layout.absolute .left{
                left:0;
                width: 300px;
                background: red;
            }
            .layout.absolute .center{
                left: 300px;
                right: 300px;
                background: green;
            }
            .layout.absolute .right{
                right: 0;
                width: 300px;
                background: blue;
            }
        </style>

3.flex布局

html：

    <section class="layout flex">
        <div class="left"></div>
        <div class="center"></div>
        <div class="right"></div>
    </section>

css:

         <style>
            *{
                margin:0;
                padding:0;
            }
            .layout.flex{
                display: flex;
            }
            .layout.flex>div{
                height: 100px;
            }
            .layout.flex .left{
                width: 300px;
                background: red;
            }
            .layout.flex .center{
                flex: 1;
                background: green;
            }
            .layout.flex .right{
                width: 300px;
                background: blue;
            }
        </style>

4.表格布局

html：

    <section class="layout table">
        <div class="left"></div>
        <div class="center"></div>
        <div class="right"></div>
    </section>

css：

         <style>
            *{
                margin:0;
                padding:0;
            }
            .layout.table{
                display: table;
                width: 100%;
            }
            .layout.table>div{
                display: table-cell;
                height: 100px;
            }
            .layout.table .left{
                width: 300px;
                background: red;
            }
            .layout.table .center{
                background: yellow;
            }
            .layout.table .right{
                width: 300px;
                background: blue;
            }
        </style>

5.网格布局

html：

    <section class="layout grid">
        <div class="left"></div>
        <div class="center"></div>
        <div class="right"></div>
    </section>

css:

         <style>
            *{
                margin:0;
                padding:0;
            }
            .layout.grid{
                width: 100%;
                display:grid;
                grid-template-rows: 100px;
                grid-template-columns: 300px auto 300px;
            }
            .layout.grid .left{
                background: red;
            }
            .layout.grid .center{
                background: yellow;
            }
            .layout.grid .right{
                background: blue;
            }
        </style>