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

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

留言

Your email address will not be published. Required fields are marked *