自适应篇

 

　　　　一、两列定宽，一列自适应

　　1.table

html:

<div class="container">  
	<div class="left"> 
		<p>我在左边哦</p> 
	</div> 
	<div class="center">
		<p>我在中间</p>
	</div>
	<div class="right"> 
		<p>我在右边哦</p>
	</div>
</div>

css:

.container{display:table;table-layout:fixed;width:100%;}
.left,.center,.right{display:table-cell;}
.left .center{width:200px;}

　　

效果图：

 

　　2.flex

html:

<div class="container">  
	<div class="left"> 
		<p>我在左边哦</p> 
	</div> 
	<div class="center">
		<p>我在中间</p>
	</div>
	<div class="right"> 
		<p>我在右边哦</p>
	</div>
</div>

　　css:

.container{display:flex;}
.left .center{width:100px;}
.right{flex:1}

　　效果图：

 

　　　　3.float  + margin

html:

 

　　　　二、两侧定宽，中间自适应

　　1.table

html:

<div class="container">  
	<div class="left"> 
		<p>我在左边哦</p> 
	</div> 
	<div class="center">
		<p>我在中间</p>
	</div>
	<div class="right"> 
		<p>我在右边哦</p>
	</div>
</div>

　　css:

.container{width:100%;display:table;table-layout:fixed}
.left,.center,.right{display:table-cell;}
.left{width:100px;}
.right{width:100px;}

　　效果图：

 

　　2.flex

html:

<div class="container">  
	<div class="left"> 
		<p>我在左边哦</p> 
	</div> 
	<div class="center">
		<p>我在中间</p>
	</div>
	<div class="right"> 
		<p>我在右边哦</p>
	</div>
</div>

　　css:

.container{display:flex;}
.left{width:100px;}
.center{flex:1;}
.right{width:100px;}

效果图：

 

　　3.float + margin

html:

<div class="container">  
	<div class="left"> 
		<p>我在左边哦</p> 
	</div> 
	<div class="center">
		<p>我在中间</p>
	</div>
	<div class="right"> 
		<p>我在右边哦</p>
	</div>
</div>

　　css:

.left{width：100px;float:left;}
.center{float:left;width:100%;margin-right:-200px;} /*.center{margin:0 200px}*/
.right{width:100px;float:right;}

效果图：

　　　　三、一列不定宽，一列自适应

　　1.float  +  margin

html:

<div class="container">  
	<div class="left"> 
		<p>我在左边哦</p> 
	</div> 
	<div class="right"> 
		<p>我在右边哦</p>
	</div>
</div>

　　css:

.left{float:left;}
.right{overflow:hidden;}

效果图：

 

　　2.flex

html:

<div class="container">  
	<div class="left"> 
		<p>我在左边哦</p> 
	</div> 
	<div class="right"> 
		<p>我在右边哦</p>
	</div>
</div>

　　css:

.container{display:flex;}
.right{flex:1;}

效果图：

 

 

完毕。