三栏布局，中间自适应

1.浮动

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

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

中间盒子放最后，不然占位了右边盒子就到下面去了

2.定位

dom位置随便
.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;
            margin: 0 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布局

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

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

5.grid布局

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

       .left{
            
            background: red;
        } 
        .right{
           
            background: pink;
        }
        .center{
            background: yellow;
        }

 

当内容超出高度时

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

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

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

grid是字超出，盒子不变

 

转自：https://blog.csdn.net/weixin_42734433/article/details/82935761