左边固定 右边自适应

1.css display flex 和 flex-flow:now;

.container{display: flex;display:-webkit-flex;flex-flow:now;}
.left{width:200px;height: 100px;}
.right{flex:1;-webkit-flex:1;}

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

 

2.float:left

.left{width:200px;height: 100px;float:left;}
.right{margin-left:200px;}

3.position:absolute

.left{width:200px;height: 100px;position:absolute;left:0;top:0;}
.right{margin-left:200px;}

4.display:table

.container{display: table;width:100%;}
.left{width:200px;height: 100px;}
.right,.left{display:table-cell;}

5 width:calc(100% - 100px)

.container{width:100%;}
.container div{float: left}
.left{width:200px;height: 100px;}
.right{width:calc(100% - 200px);}

posted @ 2018-09-07 10:38  xiaoyaoyaozheng  阅读(107)  评论(0编辑  收藏  举报