display:table-cell的应用

display:table-cell属性指让标签元素以表格单元格的形式呈现，类似于td标签。IE6,IE7不兼容此属性。

特点
1 同行等高 （可用于等高布局）
2 宽度自动调节（可用于左边固定右边自适应）

注意事项
与其他一些display属性类似，table-cell同样会被其他一些css属性破坏，例如float, position:absolute。设置了display:table-cell的元素对宽度高度敏感，对margin值无反应，响应padding属性，基本上就是一个td标签元素

应用
使未知宽高的元素,垂直居中

.box{
  width:200px;
  height:200px;
  display:table-cell;
  vertical-align:middle;
  text-align:center;
}
span{
  display:inline-block;
}

<div class="box">
  <span>太好了</span>
</div>

左边固定，右边自适应

.left{
  float:left;
  width:200px;
  height:300px;
  background:red;
}
.right{
  display:table-cell;
  width:2000px;(宽度尽量设大)
}
<div class="left"></div>
<div class="right"></div>

等高布局
考虑到匿名创建表格元素的问题，所有table-cell元素外一定要留有一个用来包裹的标签。于是，我们有类似下面的CSS代码：

.list-row{
  display:table-row;
}
.list-cell{
  display:table-cell; 
  width:50%;
}

<div class="list-row">
  <div class="list-cell">是否了客服都是</div>
  <div class="list-cell">啥地方就立刻多舒服了接口来缴费卡..舒服了空间的数据库了</div>
</div>