display：table表格布局
css布局左边固定右边自适应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标签元素了。
.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;
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论