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; }

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