请使用firefox,chrome等最新浏览器浏览本站。

display:table-cell应用

css3 阿豹 458次浏览 0个评论 扫描二维码

table-cell简介

display:table-cell属性指让标签元素以表格单元格的形式呈现,类似于td标签。目前IE8+以及其他现代浏览器都是支持此属性的(ie67不支持)。table-cell会被其他一些CSS属性破坏,例如float, position:absolute,所以,在使用display:table-cell与float:left或是position:absolute属性尽量不用同用。设置了display:table-cell的元素对宽度高度敏感,对margin值无反应,响应padding属性,基本上就是活脱脱的一个td标签元素了。

table-cell应用

1.实现大小不固定元素的垂直居中

2.实现两栏自适应布局(兼容IE678)
查看demo
代码如下:

<!DOCTYPE html> <html> <head> <title>TODO supply a title</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> *{ margin:0;padding:0; } .g-tablecell{ display: table-cell; //ie6,7下使用display:inline-block *display:inline-block; } </style> </head> <body> <div style="border:1px solid red;font-size:14px;line-height: 20px;"> <span style="float:left">示例一:</span> <p class="g-tablecell"> 斯蒂芬斯蒂芬是打发发生发蒂芬斯蒂芬是打发发生发蒂芬斯蒂芬是打发发生发蒂芬斯 蒂芬是打发发生发蒂芬斯蒂芬是打发发生发蒂芬斯蒂芬是打发发生发蒂芬斯蒂芬是打发发生发生发生 是短发是发顺丰安生飞安生发送地方啊顺丰啊发的 </p> </div> </body> </html>

3.实现列表布局
查看demo

4.实现等高布局
查看demo

css : .list_box{overflow:hidden;border:1px solid red;color:white;} .list_cell{display:table-cell; width:30%;background-color:red;} .list_center{background-color:green;} html: <div class="list_box"> <div class="list_cell">我是等高布局我是等高布局我是等高布局我是等高布局我是等高布局我是等高布局我是等高布局我是等高布局我是等高布局我是等高布局我是等高布局我是等高布局我是等高布局我是等高布局我是等高布局我是等高布局我是等高布局我是等高布局我是等高布局我是等高布局</div> <div class="list_cell list_center">我是等高布局我是</div> <div class="list_cell">我是等高布局我是等高布局我是等高布局我是等高布局我是等高布局我是等高布局 </div> </div>

转载请注明display:table-cell应用
喜欢 (0)or分享 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到