css两列布局，父容器宽度不固定，左边宽度固定，右边子元素宽度自

css两列布局是平时工作中经常用到的，实现的方式也有很多种，话不多说直接上代码。

1.左边子元素宽度固定，右边子元素overflow: hidden；

.left{width: 100px;height:40px;}.right{overflow: hidden;}

2.父容器position: relative，左边子元素宽度固定position: absolute，右边子元素margin-left: 左边的宽度（左边的宽度+左边与右边的间隙）；

.box{position: relative}.left{width: 100px;height:40px;position: absolute;top:0;left:0;}

.right{height:40px;margin-left:60px;}

3.父容器display: table，左边子元素宽度固定，右子元素display: table-cell；

.box{display: table;}.left{width: 100px;height:40px;}.right{display: table-cell;height:40px;}

4.flex布局，兼容性不是很好；

.box{display: flex;}.left{width: 100px;height:40px;}.right{flex:1;height:40px;}