display: table-cell; 自适应布局

Posted Debugs

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了display: table-cell; 自适应布局相关的知识,希望对你有一定的参考价值。

#extras {
display: table-cell;
width: 180px;
padding-left: 10px;
border-right: 1px dotted #d7ad7b;
}

 

table
使该元素按table样式渲染
table-row
使该元素按tr样式渲染
table-cell
使该元素按td样式渲染
table-row-group
使该元素按tbody样式渲染
table-header-group
使该元素按thead样式渲染
table-footer-group
使该元素按tfoot样式渲染
table-caption
使该元素按caption样式渲染
table-column
使该元素按col样式渲染
table-column-group
使该元素按colgroup样式渲染

以上是关于display: table-cell; 自适应布局的主要内容,如果未能解决你的问题,请参考以下文章

两个div并排,左边div固定宽度,右边宽度自适应”,至少列出4种。

table-cell笔记

如何让高度自适应的div中的文字水平垂直居中

CSS display 属性

table-cell完成左侧定宽,右侧定宽及左右定宽等布局

页面架构(笔记2)——垂直居中布局