CSS实现左侧固定，右侧自动填充的两种方式

页面结构

<div class="container">
    <div class="left">left</div>
    <div class="right">right</div>
</div>

float

<style>
.left{
    float: left;
    width:150px;
    height: 300px;
}
.right{
    overflow: hidden;
    height: 300px;
}
</style>

 flex

.container{display: flex;}
.left{
    flex-grow:0;
    width:150px;
    height: 300px;
}
.right{
    flex-grow:1;
    height: 300px;
}

转载于:https://my.oschina.net/u/3400107/blog/3085800