实现左边定宽，右边自适应布局

简言之，欲实现下面效果

下面是几种方法：

1、利用flex

HTML

<div class="use-flex">
 <div class="col1"></div>
  <div class="col2"></div>
</div>

css

.use-flex{
  display:flex;
  display:-webkit-flex;
}
.col1{
  background-color: red;
  height:300px;
  width:200px;
  flex-shrink:0;
}
.col2{
  background-color: green;
  width:100px;
  flex-grow:1;
}

2、 利用position:absolute

HTML

<div class="container">
 <div class="col1"></div>
  <div class="col2"></div>
</div>

css

.container{
  position:relative;
}
.col1{
  position:absolute;
  left:0;
  top:0;
  background-color: green;
  width:100px;
  height:300px;
}
.col2{
  padding-left:100px;
  background-color: red;
  height:300px;
}

3、利用table布局

HTML

 <table>
   <tr>
     <td  class="col1"></td>
     <td class="col2"></td>
   </tr>
 </table>

css

table{
  width:100%;
  height:300px;
}

.col1{
  width:100px;
  background-color: green;
}
.col2{
  background-color: red;
}

4、使用float

HTML

<div class="container">
   <div class="col1"></div>
   <div class="col2">dfd</div>
 </div>

css

.container{
  overflow:hidden;
  zoom:1;
}
.col1{
  background-color: green;
  width:100px;
  height:300px;
  float:left;

}
.col2{
  margin-left:100px;
  background-color: red;
  height:300px;
}