css布局：定宽，自适应

css三栏布局：1、中自：float，absolute，margin三种方法。2、中固：margin，table两种方法。

两边定宽，中间自适应：

float:

#left{
		float:left;
		220px;
		height:200px;
		background-color: red;
	}
	#right{
		float:right;
		220px;
		height:200px;
		background-color: red;
	}
	#main{
		margin:0 230px;
		height:200px;
		background-color: olive
	}

<div id='left'>left</div>
<div id='right'>right</div>
<div id='main'>mian</div>

absolute:

html,
	body{
		margin:0;
		padding:0;
		height:100%;
	}
	#left,
	#right{
		position:absolute;
		top:0;
		220px;
		height: 100%;
		background-color: red
	}
	#left{
		left:0;
	}
	#right{
		right:0;
	}
	#main{
		margin:0 230px;
		height:100%;
		background-color: olive
	}

<div id='left'>left</div>
	<div id='right'>right</div>
	<div id='main'>mian</div>

前两种方法html中，中间列一定要放在左右两列的后面。

margin:-px:

#main{
		float:left;
		100%;
	}
	#main_con{
		margin:0 230px;
		height:220px;
		background-color: green;
	}
	#left{
		float:left;
		margin-left:-100%;   /*由main的width决定*/
		230px;
	}
	#right{
		float:left;
		margin-left:-230px;  /*自身宽度的负值*/
		230px;
	}
	#left .inner,
	#right .inner{
		background-color: orange;
		margin:0 10px;   /*控制边栏与主内容的间距*/
		height:220px;
	}

<div id='main'>
		<div id='main_con'>main</div>
	</div>
	<div id='left'>
		<div id='left_con' class='inner'>left</div>
	</div>
	<div id='right'>
		<div id='right_con' class='inner'>right</div>
	</div>

中间定宽，两边自适应：

方法一：margin:-px

#main{
		float:left;
		540px;		
		background-color: olive;
	}
	#left, #right{
		margin-left: -271px;
		float:left;
		50%;		
	}	
	.inner{
		padding:20px;
	}
	#left .inner,
	#right .inner{
		margin-left:271px;
		background-color:orange 
	}

<div id='left'>
		<div class='inner'>left</div>
	</div>
	<div id='main'>
		<div class='inner'>main</div>
	</div>
	<div id='right'>
		<div class='inner'>right</div>
	</div>

方法二：挺简单的。

.left{
		background-color: red;
	}
	.main{
		background-color: orange;
	}
	.right{
		background-color: red;
	}

<table width='100%'>
		<tr>
			<td class='left'>左边自适应</td>
			<td class='main' width='500'>中间固定宽度</td>
			<td class='right'>右边自适应</td>
		</tr>
	</table>