display:table-cell属性指让标签元素以表格单元格的形式呈现,类似于td标签。
与其他一些display属性类似,table-cell同样会被其他一些CSS属性破坏,例如float, position:absolute,所以,在使用display:table-cell与float:left或是position:absolute属性尽量不要一起使用。
设置了display:table-cell的元素对宽度高度敏感,对margin值无反应,响应padding属性,基本上就是活脱脱的一个td标签元素了。
在简单介绍了table-cell之后,来看看如何利用它实现两栏自适应布局
Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis tenetur culpa a
odio debitis iste earum eius, vel fugiat soluta pariatur doloribus animi!
Possimus ratione sed molestiae labore error cum!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis tenetur culpa a
odio debitis iste earum eius, vel fugiat soluta pariatur doloribus animi!
Possimus ratione sed molestiae labore error cum!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis tenetur culpa a
odio debitis iste earum eius, vel fugiat soluta pariatur doloribus animi!
Possimus ratione sed molestiae labore error cum!
.box {
width: 60%;
margin: 60px auto 0;
padding: 20px;
background-color: #dddddd;
&::after {
content: "";
display: table;
clear: both;
}
.img-wrapper {
float: left;
margin-right: 10px;
line-height: 0;
}
.content {
display: table-cell;
}
}
效果图
本例中,左侧为头像,右侧内容自适应。其中头像部分使用了float属性,左浮动,IE8+以及Firefox、Chrome、Opera等现代浏览器右侧使用了display:table-cell属性,结果就自适应了,很简单的代码,很神奇的效果。
参考:张鑫旭
https://www.zhangxinxu.com/wordpress/2010/10/%E6%88%91%E6%89%80%E7%9F%A5%E9%81%93%E7%9A%84%E5%87%A0%E7%A7%8Ddisplaytable-cell%E7%9A%84%E5%BA%94%E7%94%A8/