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

html代码

    <div class="left">1111</div>	
	<div class="center">1212</div>	
	<div class="right">222</div>	

方法一：绝对定位

	<style type="text/css">
			.left{
				position: absolute;
				width: 100px;
				height: 300px;
				left: 0;
				background: #269ABC;
			}
			.right{
				position: absolute;
				width: 100px;
				height: 300px;
				background: #398439;
				right: 0;
			}
			.center{
				position: absolute;
				left: 100px;
				right:100px;
				height:300px;
				background:#669900;
			}
		</style>

方法二：flex布局
html代码

<div class=''div''>
	<div class="left">1111</div>	
	<div class="center">1212</div>	
	<div class="right">222</div>	
</div>

	.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布局

	<div class="left">1111</div>		
	<div class="right">222</div>	
	<div class="center">1212</div>

该布局法的好处是受外界影响小，但是不足是 三个元素的顺序，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;
			}