display:table-cell的应用

一、display:table-cell属性简述

display:table-cell 属性指让标签元素以表格单元格的形式呈现，类似于 td 标签。 table-cell 同样会被其他一些CSS属性破坏，例如 float ,  position:absolute ，所以，在使用 display:table-cell 与 float:left 或是 position:absolute 属性尽量不用同用。

二、display:table-cell与大小不固定元素的垂直居中

div{display:table-cell; width:1em; height:1em; border:1px solid #beceeb; font-size:144px; text-align:center; vertical-align:middle;}
div img{vertical-align:middle;}

三、display:table-cell与两栏自适应布局

左侧为头像，右侧内容自适应。其中头像部分使用了 float 属性，左浮动，右侧使用了 display:table-cell 属性，结果就自适应了

四、display:table-cell下的等高布局

.list_row{display:table-row;}
.list_cell{display:table-cell;table-layout:fixed;width:30%; padding:1.6%; background-color:#f5f5f5;}

转载于:https://www.cnblogs.com/NatChen/p/7902870.html