三個盒子，左右定寬，中間自適應

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;
			}