java自适应table_display:table-cell实现两栏自适应布局

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/