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

1、利用flex

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

.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

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

.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布局

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

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

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

4、使用float

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

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

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