在后台开发中，有一种布局形式非常常见，就是左边导航部分宽度固定，右边内容宽度自适应。
1. 左边浮动，右边marginleft=/=于边栏宽度
1
2
3
| .wrapper{border: 1px solid #f00;overflow: hidden;}
.left{width: 100px;background: #ddd;float: left;}
.right{margin-left: 120px;}
|
2. 左侧使用绝对定位，右侧margin-left=左侧宽度
1
2
3
| .wrapper{border: 1px solid #f00;position: relative;overflow: hidden;}
.left{width:100px;background:#ddd;position:absolute;left:0;top:0}
.right{margin-left:120px}
|
3. 左侧浮动，右侧使用verflow:hidden,触发BFC
1
2
3
| .wrapper{border: 1px solid #f00;overflow: hidden;}
.left{width: 100px;background: #ddd;float: left;}
.right{overflow:hidden}
|
注意：右边盒子触发bfc，使其不与浮动盒子区域重叠，因此会重新计算宽度。
4. 利用双float和calc计算属性
1
2
3
| .wrapper{border: 1px solid #f00;overflow: hidden;}
.left{width: 100px;background: #ddd;float: left;}
.right{width: calc(100% - 120px);float: right;}
|
注意：cacl里面的运算符两边必须要有空格，两个div必须一左一右浮动
5. 利用双inline-block和calc
1
2
3
| .wrapper{border: 1px solid #f00;}
.left{width: 100px;background: #ddd;display: inline-block;vertical-align: top;}
.right{width:calc(100% - 140px);display: inline-block;}
|
6.利用disable:table
1
2
3
| .wrapper{border: 1px solid #f00;display: table}
.left{width: 100px;background: #ddd;display: table-cell; }
.right{display: table-cell;}
|
7.利用display:flex布局
1
2
3
| .wrapper{border: 1px solid #f00;display: flex;}
.left{width: 100px;background: #ddd;flex:0 0 100px; }
.right{flex:1;}
|
