CSS自适应宽度DIV的几种实现方法 BFC浮动FLEXBOX都可以
2017-08-31 11:45:22   点击：

问题简单举例：当两个DIV并排显示，我们希望css左边div固定宽度，右边div自适应撑满剩下的宽度。

这个问题可以用BFC解决：

^{.left{width:200px;float:left;}
.right{overflow:hidden;}}
overflow:hidden令right盒子触发bfc，使其不与浮动盒子区域重叠，因此会重新计算宽度。

用边距解决：

^{.left{width:200px;float:left;}
.right{margin-left:220px;}}

用flexbox解决：

^{.dflex{display:flex;}}

^{.dflex>div:first-child{flex:none;width:100px;}}

^{.dflex>div:last-child{flex:1;}}

使用table解决：

   
       
       
   

 

 

用div模拟table解决：

^{div{display:table-cell;}}

 

补充练习：

当左右均定宽的时候，中间自适应应该如何处理？