三个盒子，左右定宽，中间自适应

html代码

    
1111
	
	
1212
	
	
222
	

方法一：绝对定位

方法二：flex布局
html代码

	
1111
	
	
1212
	
	
222
	

	.div{
				display: flex;
			}
			.left{
				width: 100px;
				height: 300px;
				left: 0;
				background: #269ABC;
			}
			.right{	
				width: 100px;
				height: 300px;
				background: #398439;
				right: 0;
			}
			.center{
				flex: 1;
				height:300px;
				background:#669900;
			} 

3、float布局

	
1111
		
	
222
	
	
1212

该布局法的好处是受外界影响小，但是不足是 三个元素的顺序，center一定要放在最后，center占据文档流位置，所以一定要放在最后，左右两个元素位置没有关系。当浏览器窗口很小的时候，右边元素会被挤到下一行。

		.left{
				width: 100px;
				height: 300px;
				float: left;
				background: #269ABC;
			}
			.right{	
				width: 100px;
				height: 300px;
				background: #398439;
				float: right;
			}
			.center{
				margin-left: 100px;
				margin-right:100px;
				height:300px;
				background:#669900;
			}