css 左右固定中间自适应

浮动写法：

<div class="box_float">
    <style type="text/css">
        .box_float {
            min-height: 100px;
        }
        .left {
            float: left;
            background: black;
            width: 300px;
        }
        .middle {
            background: yellow;
        }
        .right {
            float: right;
            width: 300px;
            background: black;
        }
    </style>
        <div class="right">右边</div>
        <div class="left">左边</div>
        <div class="middle">中间</div>
</div>

绝对定位写法:

<style type="text/css">
    .box_absolute {
        min-height: 100px;
    }
    .left {
        position: absolute;
        background: black;
        width: 300px;
        left: 0;
        top: 0;
    }
    .right {
        position: absolute;
        background: black;
        width: 300px;
        right: 0;
        top: 0;
    }
    .middle {
        background: yellow;
    }
    </style>
    <div class="box_absolute">
        <div class="left">左边</div>
        <div class="middle">中间</div>
        <div class="right">右边</div>
    </div>

弹性布局写法：

<style type="text/css">
    .box_flex {
        min-height: 100px;
        display: flex;
        flex-wrap: wrap;
    }
    .middle {
        background: yellow;
        flex: 1;
    }
    .left,.right {
        background: black;
        width: 300px;
    }
</style>
<div class="box_flex">
    <div class="left">左边</div>
    <div class="middle">中间</div>
    <div class="right">右边</div>
</div>

表格布局写法:

<style type="text/css">
    .box_table {
        width: 100%;
        min-height: 100px;
        display: table;
    }
    .box_table>div {
        display: table-cell;
    }
    .middle {
        background: yellow;
    }
    .left,.right {
        background: black;
        width: 300px;
    }
</style>
<div class="box_table">
    <div class="left">左边</div>
    <div class="middle">中间</div>
    <div class="right">右边</div>
</div>

网格布局写法：

<style type="text/css">
    .box_table {
        width: 100%;
        display: grid;
         grid-template-rows: 100px;
         grid-template-columns:300px auto 300px;
    }
    .middle {
        background: yellow;
    }
    .left,.right {
        background: black;
    }
</style>
<div class="box_table">
    <div class="left">左边</div>
    <div class="middle">中间</div>
    <div class="right">右边</div>
</div>