display：table 表格布局

时间：2016-01-27 17:10:42 阅读：113 评论：0 收藏：0 [点我收藏+]

标签：

table 布局最大的特点

1、同行等高

2、宽度自动调节

那么table-cell是不是具备这个特点呢？答案是yes，为什么呢？css中有一个有意思的规则“创建匿名表格元素”。

拿table-cell来扯，就是，当某个元素被设置为display:table-cell的时候，如果她的父节点不是display：table-row，爷爷节点不是display:table，这个儿子生出了他的爸爸和爷爷（浏览器会自动创建者两个匿名盒对象）

用途

1、等高布局

2、和vertical-align：middle搞在一起可以做大小不固定元素的垂直居中布局（还有多行文本垂直居中）

3、利用列宽度自动调节这个特点可以作左固定右自适应布局

.left{float:left; width:260px; padding:10px; margin-right:10px; border:1px solid #ccc;}

.classtd{ display: table-cell; width:3000px; padding:10px; border:1px solid #ccc;}

</style>

<div class="left">我是左边栏目</div>

我是自适应的右边

</div>

display:table-cell 元素生成的匿名table默认table-layout:auto。宽度将基于单元格内容自动调整。所以设置width:3000px的用途是尽可能的宽的意思。这样就可以达到自适应的效果。

http://www.cnblogs.com/StormSpirit/archive/2012/10/24/2736453.html

display:table-cell属性指让标签元素以表格单元格的形式呈现，类似于td标签。
单元格有一些比较特别的属性，例如元素的垂直居中对齐，关联伸缩等，
与其他一些display属性类似，table-cell同样会被其他一些CSS属性破坏，例如float, position:absolute，所以，在使用display:table-cell与float:left或是position:absolute属性尽量不要同用。设置了display:table-cell的元素对宽度高度敏感，对margin值无反应，响应padding属性，基本上就是活脱脱的一个td标签元素了。

.fix{*zoom:1;}

.fix:after{display:block; content:"clear"; height:0; clear:both; visibility:hidden;}

.l{float:left;}

.cell{display:table-cell; *display:inline-block; width:2000px; *width:auto;}

</div>

对于连续单词字符换行问题尝试添加以下代码

display:table; width:100%; table-layout:fixed; word-wrap:break-word;

http://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/

display：table 表格布局

标签：

原文地址：http://www.cnblogs.com/chuangweili/p/5163793.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行