Skip to content

9、巧妙的多列等高布局

规定下面的布局,实现多列等高布局。

html
<div id="container">
  <div class="left">多列等高布局左</div>
  <div class="right">多列等高布局右</div>
</div>

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

如果只是两列背景颜色高度一致,有很多方法可以实现。

法一、使用 display:flex 的方式实现

html
<div id="container">
	<div class="left">多列等高布局</div>
	<div class="right">多列等高布局,使用(display:flex) 实现。多列等高布局,使用(display:flex) 实现。多列等高布局,使用(display:flex) 实现。多列等高布局,使用(display:flex) 实现。</div>
</div>
scss
#container{
	width:400px;
	margin:0 auto;
	background-color: #ddd;
	overflow:hidden;
	display:flex;
	align-items: stretch;
}

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

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

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

html
<div id="container">
	<div class="left">多列等高布局左</div>
	<div class="right">多列等高布局,使用正负 margin 与 padding 相冲的方式实现。多列等高布局,使用正负 margin 与 padding 相冲的方式实现。</div>
</div>
scss
#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;
}

法三、父容器设置背景色实现

html
<div id="container">
	<div class="left">多列等高布局</div>
	<div class="right">多列等高布局,使用父容器设置背景色的方式实现。多列等高布局,使用父容器设置背景色的方式实现。多列等高布局,使用父容器设置背景色的方式实现。多列等高布局,使用父容器设置背景色的方式实现。这个方法有个问题,只能适用于确定哪一列会毕竟高的情况下适用。</div>
</div>
scss
#container{
	width:400px;
	margin:0 auto;
	background-color: deeppink;
	overflow:hidden;
}

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

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

法四、父容器多重背景色--线性渐变

html
<!-- 这个方法很像使用背景图,然后背景图 repeat-y  -->
<!-- 不过有了 css3 渐变之后 不需要再多一个http请求了 -->
<div id="container">
	<div class="left">多列等高布局</div>
	<div class="right">多列等高布局,如果是两列宽度固定或者百分比固定,可以试试这种父容器使用多重背景色的方法。<br/>多列等高布局,如果是两列宽度固定或者百分比固定,可以试试这种父容器使用多重背景色的方法。</div>
</div>
scss
#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;
}

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

法五、display:table-cell 实现

html
<div id="container">
	<div class="row">
		<div class="left">多列等高布局</div>
		<div class="right">多列等高布局,使用 display:table-cell 的方式实现。多列等高布局,使用 display:table-cell 的方式实现。多列等高布局,使用 display:table-cell 的方式实现。</div>
	</div>
</div>
scss
#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;
}