display:table-cell
一:什么是table-cell
display:table-cell 就是标签属性以表格形式呈现,有点像td,IE8以上兼容
二:display:table-cell使用注意
1. float,position:absolute对其有一定的破坏性;
2. 宽度高度敏感
3. 对margin毫无反映,响应padding属性
4. 类容溢出会自动撑开父元素
三:display:table-cell的几种用法
1. 大小不固定的元素垂直居中
.parent{
display: table-cell; padding: 10px;
border: 2px solid #999;
}
.parent div {
display: inline-block;
vertical-align: middle;
}
display:table-cell 加上 vertical-align:middle 使高度不同的元素都垂直居中,其中div的display:inline-block使几个div在同一行显示。
2. 两列自适应布局
.content {
display: table;
padding: 10px;
border: 2px solid #999;
}
.left-box {
float: left;
margin-right: 10px;
}
.right-box {
display: table-cell;
padding: 10px;
width: 3000px;
vertical-align: top;
border: 1px solid #ccc;
}
左侧是有 float:left,右侧使用 display:table-cell
3. 等高布局
子集都display:table-cell