解决 多列 布局

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


多列布局
一列定宽另一列自适应
(1) float + margin
兼容性有点问题，IE7以后，没问题
IE6有问题，有3像素的问题，可以通过hack解决。


<style type="text/css">
	.left {float: left; height:30px; width: 100px; background-color: #ccc;}
	.right {margin-left:110px; background-color: #369;}
</style>


(2) float + margin + fix
优点，兼容性很好，
缺点，结构多一点。

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

<style type="text/css">
	.left {
		float: left; 
		width: 100px; 
		background-color: #999;
		position: relative;		/*提高层级，否则无法选中其中的元素，因为fix在后面*/
	}
	.right-fix {
		float: right;		
		width:100%; 
		background-color: #ddd;
		margin-left:-100px; 
	}
	.right {
		margin-left:110px; 
		background-color: #369;
	}

</style>

(3)float + overflow
缺点IE6，不行
<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">
	.left {
		float: left; 
		width: 100px; 
		margin-right: 20px;
		background-color: #999;
	}

	.right {
		overflow: hidden;	/*触发bfc，bfc模式与外界隔离*/
		background-color: #ddd;
	}

</style>



(4)table

<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 {
		display: table;
		width: 100%;
		table-layout: fixed;	/*两个好处（1）加速table渲染，实现布局优先。*/
		background-color: #999;
	}

	.left, .right {
		display: table-cell;
		background-color: #eee;
	}

	.left {
		width: 100px;
		background-color: #369;
		padding-right: 20px;
	}

</style>



(5)flex
兼容性问题。性能稍微差一点，小范围布局。


<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 {
		display: flex;
	}

	.left {
		background-color: #369;
		left: 100px;
		margin-right: 20px;
	}

	.right {
		flex : 1;	/*1 1 0; 剩余宽度都给了右边*/
		background-color: #eee;
	}

</style>



多列定宽，一列自适应
<div class="parent">
	<div class="left">
		<p>left</p>
	</div>
	<div class="center">
		<p>center</p>
	</div>	
	<div class="right">
		<p>right</p>
		<p>right</p>
	</div>
</div>

－－－－－－－－－－－－1－－－－－－－－－－－－－－－
<style type="text/css">
	.parent {
		display: flex;
	}

	.left, .center {
		background-color: #369;
		left: 100px;
		margin-right: 20px;
	}

	.right {
		flex : 1;	/*1 1 0; 剩余宽度都给了右边*/
		background-color: #eee;
	}

</style>


－－－－－－－－－－－－2－－－－－－－－－－－－－－－

<style type="text/css">

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

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

</style>



多列布局
<div class="parent">
	<div class="left">
		<p>left</p>
	</div>

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

左右自适应
(1) float + overflow



<style type="text/css">
	.left {
		background-color: #369;
		float: left;
		margin-right: 20px;
	}

	.right {
		overflow: hidden;
		background-color: #eee;
	}
</style>


(2)	table

<style type="text/css">

	.parent {
		display: table;
		width: 100%;
		table-layout: fixed;
	}

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

	.left {
		width: 100px;
		padding-right: 20px;
		background-color: #369;
	}
	.right {
		background-color: #eee;
	}

</style>

(3)flex

<style type="text/css">

	.parent {
		display: flex;
	}

	.left {
		width: 200px;
		margin-right: 20px;
	}
	.right {
		flex:1;
		background-color: #369;
	}

</style>