display:table;妙用，使得左右元素高度相同

网摘

我们在设计网页的时候，为了左右能够分明一点，我们经常会在左边元素弄一个border-right，但是出现一个问题，如果左边高度比较小，这根线就短了，下面空了一部分，反正如果在右边的元素弄一个border-left也会出现这种情况。

其实我们可以用display:table;来解决左右元素高度不相同的问题。把左右元素的父元素的display设置为table，左右元素的display设置为table-cell即可。具体查看下面代码：

.container {
	display: table;
}/*container为左右元素的父元素*/
.main, .sidebar {
	float: none;
	padding: 20px;
	vertical-align: top;
}
.main {
	width: 400px;
	background-color: LightSlateGrey;
	display: table-cell;
}
.sidebar {
	width: 200px;
	display: table-cell;
	background-color: Tomato;
}

这样一来，不管是左边元素高还是右边元素高，分割线能够从顶部延生到最底部。