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>