实现三栏布局 中间自适应的五种方法

CSS布局是前端笔面试经常会被问到的问道。

今天总结一下五种方法 实现三栏布局 两边固定宽度 中间自适应的实现 。

image

  *{
        margin: 0;
        padding: 0;
    }

    .layout{
        margin-top: 20px;
        height: 200px;
    }
    .layout .left,.layout .right{
        width: 300px;
        height: 200px;
        background-color: #f7e4e4;
    }
    .layout .center{
        height: 200px;
        background-color: #e7aaaa;
    }

    /* 1. 通过浮动  */
    .layout.float .left{
        float: left;
    }
    .layout.float .right{
        float: right;
    }

    /* 2. 通过绝对定位  */
    .layout.absolute>div{
        position: absolute;
    }
    .layout.absolute .left{
        left: 0;
    }
    .layout.absolute .right{
        right: 0;
    }
    .layout.absolute .center{
        right: 300px;
        left: 300px;
    }

    /* 3. 通过flex  */
    .layout.flex {
        display: flex;
    }
    .layout.flex .center{
        flex: 1;
    }

    /* 4. 通过table-cell  */
    .layout.table {
        display: table;
        width: 100%;
    }
    .layout.table>div{
        display: table-cell;
    }

    /* 5. 通过grid布局  */
    .layout.grid {
        display: grid;
        width: 100%;
        grid-template-rows: 100px;
        grid-template-columns: 300px auto 300px;
    }