display:table-cell 学习笔

文章参考

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标签元素了。