简言之,欲实现下面效果
下面是几种方法:
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;
}