右定宽左自适应篇

 

　　　　1.float + margin

html:

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

css:

.container{margin:0 auto;}
.left{background:blue;margin-right:-100px;width:100%;float:left;}
.right{float:right;width:100px;background:orange;}

　　

效果图：

提示：实际上是背景等高！！！

　　　　2.table

html:

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

css:

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

　　效果图：

 

　　　　3.flex

html:

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

　　css:

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

　　效果图：