最近在忙着各种面试，笔试，碰到这样的问题比较多，打算在这里记录下自己对两列布局的一些实现方法的总结
下面我将用三个方法实现左栏固定，右栏自适应宽度的布局
两列布局
<div class="parent">
<div class="side"></div>
<div class="main"></div>
</div>
1.Flex
.parent{
display: flex;
}
.side{
width: 200px;
height: 200px;
margin-right: 10px;
background: #555;
}
.main{
flex: 1;
background: #ddd;
}
flex 默认有三个属性 flex-grow , flex-shrink 和 flex-basis,默认值为 0 | 1 | auto
2.Position
.parent{
position: relative;
}
.side{
width: 200px;
height: 200px;
position: absolute;
left: 0;
background: #555;
}
.main{
height: 200px;
position: absolute;
left: 210px;
right: 0;
background: #ddd;
}
.main 宽度为默认值 auto，占据整行并根据left、right调整
3.Float
.parent{
}
.side{
width: 200px;
height: 200px;
float: left;
background: #555;
}
.main{
height: 200px;
margin-left: 210px;
background: #ddd;
}
具体使用哪一种方式，还是根据实际情况选择
