实现三栏布局，中间自适应

float布局 + margin

<!-- float布局，middle部分放最后（最后加载） -->
    <div class="wrap">
        <div class="left">左侧</div>
        <div class="right">右侧</div>
        <div class="middle">中间</div>
    </div>

/* float布局 设置左右浮动，中间设置对应margin */
    .left {
        width: 200px;
        height: 200px;
        float: left;
        background: coral;
    }
    .right {
        width: 200px;
        height: 200px;
        float: right;
        background: lightblue;
    }
    .middle {
        margin: 0 220px;
        height: 200px;
        background: #555;
    }

position定位+margin

<!-- position定位，正常加载 -->
<div class="wrap">
        <div class="left">左侧</div>
        <div class="middle">中间</div>
        <div class="right">右侧</div>
    </div>

/* 
        position定位，父盒子设置relative相对定位，
        子盒子设置absolute绝对定位，左侧盒子设置top、left偏移量0；
        右侧设置right、top偏移0
        中间设置对应margin
     */

    .wrap {
        position: relative;
    }
    .left {
        position: absolute;
        top: 0;
        left: 0;
        width: 100px;
        height: 200px;
        background: coral;
    }

    .right {
        position: absolute;
        top: 0;
        right: 0;
        width: 100px;
        height: 200px;
        background: lightblue;
    }

    .middle {
        height: 200px;
        margin: 0 110px;
        background: #555;
    }

flex布局

<!-- flex 布局，左中右 -->
    <div class="wrap">
        <div class="left">左侧</div>
        <div class="middle">中间</div>
        <div class="right">右侧</div>
    </div>

/* flex布局，给父元素设置flex，中间width设置100%*/
    .wrap {
        display: flex;
        justify-content: space-between;
    }
    .left {
        width: 200px;
        height: 100px;
        background: coral;
    }
    .right {
        width: 120px;
        height: 100px;
        background: lightblue;
    }
    .middle {
        width: 100%;
        height: 100px;
        margin: 0 20px;
        background: #555;
    }

grid网格布局

<div class="wrap">
        <div class="left">左侧</div>
        <div class="middle">中间</div>
        <div class="right">右侧</div>
    </div>

/* grid布局,grid-template-columns属性设置列宽 */
    .wrap {
        display: grid;
        /* 设置列宽 */
        grid-template-columns: 200px auto 200px;
    }
    .left {
        height: 100px;
        background: coral;
    }
    .right {
        height: 100px;
        background: lightblue;
    }

    .middle {
        height: 100px;
        background: #555;
        margin:0  20px;
    }