多列等高篇

 

　　　　1.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} 

　　

效果图：

 

　　　　2.flex

html:

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

css:

.container{ display: flex; } /*align-items: stretch*/
.left { width: 100px; margin-left: 20px; } 
.right { flex: 1;}

　　效果图：