【面试题解答】CSS实现左右布局，左边定宽，右边自适应

记录自己面试时遇到的问题，在此总结。代码已经测试通过。

Q：实现将一个div（宽高自适应）分割两部分，左边定宽200px，右边宽度自适应。

A：
HTML:

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

CSS:
方式一：浮动布局

.container{
    width:100%;
    height:100vh; 
    background-color: beige;
}
.left{
    width: 200px;
    float:left;
    height: 100%;
    background-color: burlywood;
  }
.right{
    height: 100%;
    margin-left: 200px;
    background-color: aquamarine;
}

方式二：使用position

.container{
    position: relative;
    width:100%;
    height:100vh; 
    background-color: beige;
}
.left{
    position: absolute; 
    left: 0;
    width: 100%;
    height: 100%;
    background-color: burlywood;
}
.right{
    width: 100%;
    height: 100%;
    position: absolute;
    left: 200px;
    background-color: aquamarine;
}

方式三：flex布局

.container{
    display: flex;
    width:100%;
    height:100vh; 
    background-color: beige;
}
.left{
    width: 200px;
    height: 100%;
    background-color: burlywood;

}
.right{
    width: 100%;
    height: 100%;
    flex: 1;/*占满剩余部分全部*/
    left: 200px;
    background-color: aquamarine;
}

方式四：table布局

.container{
    display: table;
    width:100%;
    height:100vh; 
    background-color: beige;
}
.left{
    display: table-cell;
    width: 200px;
    height: 100%;
    background-color: burlywood;
}
.right{
    display: table-cell;
    height: 100%;
    background-color: aquamarine;
}

效果图：

1536565467942.jpg

参考：css实现左边定宽，右边自适应布局、学习css布局