面试题 -- 实现左自适应，右固定宽度的布局

html 代码

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

第一种使用table、table-cell

 .wraper {
        display: table;
        width: 200px;
    }
    .left {
        display: table-cell;
        width: 5000px;
        background-color: green;
    }
    .right {
        background-color: yellow;
        width: 100px;
        height: 150px
    }

第二种使用flex布局

.wraper {
        width: 200px;
        height: 200px;
        border: 1px solid solid;
        display: flex;
        background-color: blue;
    }
    .left {
        height: 150px;
        background-color: green;
        flex: 1;
    }
    .right {
        background-color: yellow;
        width: 100px;
        height: 150px;
        float: right;
    }

第三种使用float和margin
html代码

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

  .wraper {
        width: 400px;
    }
    .left {
        margin-right: 200px;
        height: 100px;
        background-color: blue;
    }
    .right {
        float: right;
        width: 200px;
        height: 100px;
        background-color: green;
    }