记录自己面试时遇到的问题，在此总结。代码已经测试通过。
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
