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>