文章参考
http://blog.163.com/hongshaoguoguo@126/blog/static/180469812013671133230/
说明:display:table-cell只支持IE8+的浏览器,不支持IE6、IE7。
用下面这个例子说明这个样式的妙用:
<div class="" style="display: table-cell;border: 1px solid red;height: 50px;">one</div>
<div class="" style="display: table-cell;border: 1px solid greenyellow;height: 50px;">two</div>
<div class="" style="display: table-cell;border: 1px solid blue;height: 50px;">three</div>
例子很简单,有两个重要的特性:
1、div以“inline”方式显示,全部都靠左边对齐 —— 宽度自适应
2、三个div全部高度相等,其中具体的高度以三个div高度当中最高的为准
说明:
1、table-cell同样会被其他一些CSS属性破坏,例如float, position:absolute,所以,在使用display:table-cell与float:left或是position:absolute 属性尽量不用同用。
2、设置了display:table-cell的元素对宽度高度敏感,对margin值无反应,响应padding属性,基本上就是活脱 脱的一个td标签元素了。