三栏布局中间自适应

1.浮动

.left{
            float: left;
            width: 300px;
            background: red;
            height: 100px;
}
.right{
            float: right;
            width: 300px;
            background: pink;
            height: 100px;
}
        .center{
            background: yellow;
            height: 100px;
}

<div class="left "></div>
<div class="right "></div>
<div class="center"></div>

2.定位

.left{
            position: absolute;
            left: 0;
            width: 300px;
            background: red;
            height: 100px;
        }
        .right{
            position: absolute;
            right: 0;
            width: 300px;
            background: pink;
            height: 100px;
        }
        .center{
            position: absolute;
            right: 300px;
            left: 300px;
            background: yellow;
            height: 100px;
        }

3.flex

<div class="father">
    <div class="left "></div>
    <div class="center "></div>
    <div class="right"></div>
</div>

.father{
            height: 100px;
            display: flex;
        }
        .left{
            width: 300px;
            background: red;
            height: 100px;
        }
        .right{
            width: 300px;
            background: pink;
            height: 100px;
        }
        .center{
            flex: 1;
            background: yellow;
            height: 100px;
        }

4.table布局

.father{
            height: 100px;
            display: table;
            width: 100%;
        }
        .father>div{
            display: table-cell;
        }
        .left{
            width: 300px;
            background: red;
        }
        .right{
            width: 300px;
            background: pink;
        }
        .center{
            background: yellow;
        }

当内容超出高度时

只有flex和table布局可以自适应

浮动的会到左边，因为左边没有了浮动

定位的直接向下，因为设置了左右位置

grid是字超出，盒子不变