css多列等高布局

多列等高布局，算是比较常见的一种布局，要求两列布局看上去高度一致（就是通常是两列背景色一致）。

<div id="container">
	<div class="left">多列等高布局,使用(display:flex) 实现。多列等高布局,使用(display:flex) 实现。多列等高布局,使用(display:flex) 实现。多列等高布局,使用(display:flex) 实现。</div> 
	<div class="right">多列等高布局</div>
</div>

使用display:flex的方式实现

#container{
	width:400px;
	margin:0 auto;
	background-color: #ddd;
	overflow:hidden;
	display:flex;
}

.left,
.right{
	width:200px;
	font-size: 16px;
	line-height:24px;
	color:#333;
}

.left{
	background-color: deeppink;
}
.right{
	background-color:yellowgreen;
}

拥抱Flexbox弹性布局基本概念之Flex容器一文中强调：侧轴Flex项目默认是align-items：stretch。如果Flex项目有尺寸属性（min-width / max-width / width / min-height / max-height / height），那么首先应用这些尺寸属性。即（left、right）Flex项目不要写高度等。

使用正负margin与padding相冲的方式实现

#container{
	width:400px;
	margin:0 auto;
	background:#eee;
	overflow:hidden;
}

.left,
.right{
	width:200px;
	float:left;
	font-size: 16px;
	line-height:24px;
	color:#333;
	padding-bottom:5000px;
	margin-bottom:-5000px;
}

.left{
	background-color: deeppink;
}

.right{
	background-color:yellowgreen;
}

父容器线性渐变多重背景色

<!-- 这个方法很像使用背景图，然后背景图 repeat-y  -->
<!-- 不过有了 css3 渐变之后 不需要再多一个http请求了 -->
#container{
	width:400px;
	margin:0 auto;
	background-image:
		linear-gradient(90deg, yellowgreen 50%, deeppink 0);
	overflow:hidden;
}

.left,
.right{
	width:200px;
	float:left;
	font-size: 16px;
	line-height:24px;
	color:#333;
}

display:table-cell实现

<div id="container">
	<div class="row"><!--这里多了一行标签，不可省略-->
		<div class="left">多列等高布局,使用 display:table-cell 的方式实现。多列等高布局,使用 display:table-cell 的方式实现。多列等高布局,使用 display:table-cell 的方式实现。</div> 
		<div class="right">多列等高布局</div>
	</div>
</div>

#container{
	width:400px;
	margin:0 auto;
	background:#eee;
	overflow:hidden;
	display:table;
}

.left,
.right{
	display:table-cell;
	width:200px;
	font-size: 16px;
	line-height:24px;
	color:#333;
}
.left{
	background-color: deeppink;
}
.right{
	background-color:yellowgreen;
}

整理自：谈谈一些有趣的CSS题目（9）-- 巧妙的多列等高布局。