display：table-cell的等高布局

display:table-cell属性指让标签元素以表格单元格的形式呈现，类似于td标签。目前IE8+以及其他现代浏览器都是支持此属性的，但是IE6/7只能对你说sorry了，这一事实也是大大制约了display:table-cell属性在实际项目中的应用（写于2016年8月24日：时代在变，当下，是时候登上舞台了）。

我们都知道，单元格有一些比较特别的属性，例如元素的垂直居中对齐，关联伸缩等，所以display:table-cell还是有不少潜在的使用价值的，虽说IE6/7不支持此属性，但是幸运的是，IE6/7一些乱糟糟的属性与渲染，我们可以其他方法实现同样或是类似的效果。

与其他一些display属性类似，table-cell同样会被其他一些CSS属性破坏，例如float, position:absolute，所以，在使用display:table-cell与float:left或是position:absolute属性尽量不用同用。设置了display:table-cell的元素对宽度高度敏感，对margin值无反应，响应padding属性，基本上就是活脱脱的一个td标签元素了。

想了解更多，请查看张鑫旭老师的文章《我所知道的几种display:table-cell的应用》

以及简书的另一片文章 https://www.jianshu.com/p/2479665ee1f8

1.等高布局

table表格中的单元格最大特点之一就是同一行列表元素都等高，所以很多时候我们需要等高布局的时候就可以借助display：table-cell属性

举个例子吧，

html

对于不支持display:table-cell属性的IE6/7浏览器，又当如何解决呢？

我们可以使用“补差等高法”，就是一个一个很大的margin-bottom负值配上一个同样大小的padding-bottom值，本例中为了实例需要，margin-bottom值就百来像素。显然，由于两者原理不同，难免需要用到hack，所以demo完整CSS代码如下：

实例：实现两栏等高

代码如下：

实现效果