display:table 表格布局
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了display:table 表格布局相关的知识,希望对你有一定的参考价值。
table 布局最大的特点
1、同行等高
2、宽度自动调节
那么table-cell是不是具备这个特点呢?答案是yes,为什么呢?css中有一个有意思的规则“创建匿名表格元素”。
拿table-cell来扯,就是,当某个元素被设置为display:table-cell的时候,如果她的父节点不是display:table-row,爷爷节点不是display:table,这个儿子生出了他的爸爸和爷爷(浏览器会自动创建者两个匿名盒对象)
用途
1、等高布局
2、和vertical-align:middle搞在一起可以做大小不固定元素的垂直居中布局(还有多行文本垂直居中)
3、利用列宽度自动调节这个特点可以作左固定右自适应布局
<style type="text/css">
.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 class="classtd">
我是自适应的右边
</div>
display:table-cell 元素生成的匿名table默认table-layout:auto。宽度将基于单元格内容自动调整。所以设置width:3000px的用途是尽可能的宽的意思。这样就可以达到自适应的效果。
display:table-cell属性指让标签元素以表格单元格的形式呈现,类似于td标签。
单元格有一些比较特别的属性,例如元素的垂直居中对齐,关联伸缩等,
与其他一些display属性类似,table-cell同样会被其他一些CSS属性破坏,例如float, position:absolute,所以,在使用display:table-cell与float:left或是position:absolute属性尽量不要同用。设置了display:table-cell的元素对宽度高度敏感,对margin值无反应,响应padding属性,基本上就是活脱脱的一个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 class="fix">
<div class="l"></div>
<div class="cell"></div>
</div>
对于连续单词字符换行问题尝试添加以下代码
display:table; width:100%; table-layout:fixed; word-wrap:break-word;
以上是关于display:table 表格布局的主要内容,如果未能解决你的问题,请参考以下文章