`
阅读更多

display的属性值table-cell代表将标签转换为表格td或是th格式,之后可以引用td的属性vertical-align:bottom等;

如需要将td单行显示需要加入行元素display:table-row;

 

如并列显示则不需要加入display:table-row;

 

ie6、ie7不支持;

 

下面的案例是单行显示代码:

 

ul li p{ overflow:hidden; width:130px;  margin:0 0 0 20px; overflow:hidden; display:table-row; }
ul li p span{ display:table-cell; padding:10px 0 0 10px; vertical-align:bottom; height:28px; }

分享到:
评论

相关推荐

    关于CSS中的display:table-cell使用技巧的几种应用

    我们都知道,单元格有一些比较特别的属性,例如元素的垂直居中对齐,关联伸缩等,所以display:table-cell还是有不少潜在的使用价值的,虽说IE6/7不支持此属性,但是幸运的是,IE6/7一些乱糟糟的属性与渲染,我们可以...

    CSS中的table-cell属性使用实例教程

    拿table-cell来扯,就是,当某个元素被设置为display:table-cell的时候,如果她的父节点不是display:table-row,爷爷节点不是display:table,那么下面就是见证奇迹的时候,这个儿子生出了他的爸爸和爷爷(浏览器会...

    解决Layui 表格自适应高度的问题

    display:table-cell; vertical-align: middle; } </style> 成功解决问题,不要在field中添加高度,可以自行设置宽度,这样就可以让表格自适应高度了~! 以上这篇解决Layui 表格自适应高度的问题就是小编...

    使用CSS的table-cell属性实现左图右文的排版方法详解

    对要素进行横向排列的...clear:both可以使用display:inline-block替换,display:table-cell最主要的是纵向居中。还有就是在响应式设计的时候,padding和border不会导致样式顶出边框的问题。再也不需要计算宽度和使用bo

    实现div垂直居中的display:table-cell方法示例介绍

    ie7和ie6都不能识别 display: table-cell;(但是支持display: block等css1的属性!) ie8以及以后版本可以识别! ie7和ie6能识别vertical-align:middle; 如果盒模型中间只有几段文字的话,设置line-height就可以...

    display:table-cell实现兼容性的两栏自适应布局实现代码

    display:table-cell实现兼容性的两栏自适应布局,需要的朋友可以参考下

    css之display属性之inline-block布局实现详解

    DOCTYPE,则 Internet Explorer 8 (以及更高版本)支持属性值 "inline-table"、"run-in"、"table"、"table-caption"、"table-cell"、"table-column"、"table-column-group"、"table-row"、"table-row-group"、以及 ...

    table-cell完成左侧定宽,右侧定宽及左右定宽等布局的实现方法

    使用table-cell完成以下几种布局(ie8及以上兼容) 1、左侧定宽-右侧自适应 XML/HTML Code复制内容到剪贴板 .left{ width: 300px; height: 500px; border: 1px solid; float: left; } .right{ ...

    路由协议命令display ip routing-table ip-prefix

    路由协议命令,display ip routing-table ip-prefix 命令用来查看通过指定前缀列表过滤的路由。 如果指定的前缀列表不存在,当使用了verbose 参数时将显示所有active 及inactive路由的详细信息,不使得verbose 参数...

    CSS属性display:inline-block用法深入理解

    本文向大家描述一下CSS属性display:inline-block的用法,在使用CSS实现表现的时候,会经常接触到display:inline-block这一属性;可以将对象呈递为内联对象,但是对象的内容作为块对象呈递,旁边的内联对象会被呈递在...

    深入解析CSS的display:inline-block属性的使用

    display:inline-block感觉与display:table-cell有些相似,例如对内部元素的包裹性。但是,由于display:inline-block最大的不同就是其没有父元素的匿名包裹特性,这使得display:inline-block属性的使用非常自由,可与...

    DisplayPort-Alt-Mode-on-USB-C.pdf

    This standard describes the use of the DisplayPort protocol between devices that support the USB Type-C connector using USB Type-C to USB Type-C Cable Assemblies. It describes cable assemblies that ...

    CSS display属性的table表格布局

    项目改造中遇到DIV+CSS实现的table,新需求需要在表格使用单元格合并,网上调查返现CSS display:table实现的table表格,没有单元格的属性和样式,经过一番思考,曲折现实了单元格的合并,即采用正行嵌套一个单独的...

    基于display:table的CSS布局让HTML元素和像table一样

    当IE8发布时,它将支持很多新的CSS display属性值,包括与表格相关的属性值:table、table-row和table-cell,它也是最后一款支持这些属性值的主流浏览器。它标志着复杂CSS布局技术的结束,同时也给了HTML表格布局...

    display-msoffice-docs-android-with-apache-poi

    android 上显示 office 文档

    display属性.doc

    display属性.doc display属性.doc display属性.doc

    DisplayPort-Alt-Mode-v2.0

    DisplayPort-Alt-Mode-v2.0

Global site tag (gtag.js) - Google Analytics