解决 多列 布局 左右等高问题

两栏自适应，左侧固定，右侧自适应。
右侧增长，左侧也随之增长。

(1)table 可以实现等高布局

<div class="parent">
	<div class="left">
		<p>left</p>
	</div>
	<div class="right">
		<p>right</p>
		<p>right</p>
		<p>right</p>
	</div>
</div>

<style type="text/css">
	body {
		margin: 0;
		padding: 0;
	}
	.parent {
		display: table;
		width: 100%;
		table-layout: fixed;
		background-color: #ddd;
	}

	.left, .right {
		display: table-cell;
	}

	.left {
		width: 100px;
		padding-right: 20px;
	}

</style>



(2)flex 
天然等高，align－item的对齐方式。默认就是拉伸，

<div class="parent">
	<div class="left">
		<p>left</p>
	</div>
	<div class="right">
		<p>right</p>
		<p>right</p>
	</div>
</div>

<style type="text/css">
	body {
		margin: 0;
		padding: 0;
	}
	.parent {
		display: flex;
		background-color: #ddd;
	}

	.left {
		width: 100px;
		padding-right: 20px;
	}

	.right {
		flex: 1;
	}

</style>




(3) float
实现的是伪等高，不是真实的，但是兼容性好。

<div class="parent">
	<div class="left">
		<p>left</p>
	</div>
	<div class="right">
		<p>right</p>
		<p>right</p>
	</div>
</div>

<style type="text/css">
	.parent {
		overflow: hidden;
	}

	.left, .right {
		padding-bottom: 9999px;
		margin-bottom: -9999px;
	}

	.left {
		float: left;
		width: 100px;
		margin-right: 20px;
		background-color: #ccc;
	}

	.right {
		overflow: hidden;
		background-color: #369;
	}

</style>