三栏布局，中间自适应

1.浮动

css

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

dom

<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;
        }

中间的左右都要300px

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;
        }

table不要写错了

5.grid布局

.father{
            height: 100px;
            display: grid;
            width: 100%;
            grid-template-rows:100px;
            grid-template-columns:300px auto 300px;
 }

子盒子都不用写样式

当内容超出高度时

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

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

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

grid是字超出，盒子不变

下面链接完美解释

https://blog.csdn.net/mrchengzp/article/details/78573208