display:table-cell屬性指讓標(biāo)簽元素以表格單元格的形式呈現(xiàn)浮入，類似于td標(biāo)簽变勇。IE6,IE7不兼容此屬性骡送。
特點
1 同行等高 （可用于等高布局）
2 寬度自動調(diào)節(jié)（可用于左邊固定右邊自適應(yīng)）
注意事項
與其他一些display屬性類似世杀，table-cell同樣會被其他一些css屬性破壞惧盹，例如float, position:absolute乳幸。設(shè)置了display:table-cell的元素對寬度高度敏感，對margin值無反應(yīng)钧椰，響應(yīng)padding屬性粹断，基本上就是一個td標(biāo)簽元素
應(yīng)用
使未知寬高的元素,垂直居中
.box{
width:200px;
height:200px;
display:table-cell;
vertical-align:middle;
text-align:center;
}
span{
display:inline-block;
}
<div class="box">
<span>太好了</span>
</div>
左邊固定，右邊自適應(yīng)
.left{
float:left;
width:200px;
height:300px;
background:red;
}
.right{
display:table-cell;
width:2000px;(寬度盡量設(shè)大)
}
<div class="left"></div>
<div class="right"></div>
等高布局
考慮到匿名創(chuàng)建表格元素的問題嫡霞，所有table-cell元素外一定要留有一個用來包裹的標(biāo)簽瓶埋。于是，我們有類似下面的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">啥地方就立刻多舒服了接口來繳費卡..舒服了空間的數(shù)據(jù)庫了</div>
</div>
