左定宽右自适应篇

 

　　　　1.flloat + margin

html:

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

css:

.left {float: left;width: 100px;}
.right {margin-left: 2300px}

 效果图：

 

　　　　2.float + overflow

html:

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

　　css:

.left { float: left;width: 100px;}
.right {overflow: hidden;}

　　效果图：

 

　　　　3.table

html:

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

　　css:

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

　　

效果图：

 

　　　　4.flex

html:

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

　　css:

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

　　

效果图：