CSS深入研究:display的恐怖故事解密(2)

上集《CSS深入研究:display的恐怖故事解密(1) - display-inline》已经把display的属性列表拉出来溜了，发现在这个属性恐怖面貌其实都是脆弱的伪装。除了部分常用属性外，其他的都是传说哥。既然是传说哥，请不要迷恋。就让传说继续传说着吧。这次我们来搞定table-cell这个货。（table-cell：IE6、7不支持）

成都创新互联公司专注于凤翔网站建设服务及定制，我们拥有丰富的企业做网站经验。热诚为您提供凤翔营销型网站建设，凤翔网站制作、凤翔网页设计、凤翔网站官网定制、重庆小程序开发服务，打造凤翔网络公司原创品牌,更为您提供凤翔网站排名全网营销落地服务。

table-cell这个家伙在国外的网站中偶有露头，天朝由于IE6、7这两个货泛滥成灾，难有发挥，那么，这个家伙到底能干些什么呢？先让我们来研究下table，那些年曾经使用的table布局为何如此辉煌荡漾呢？她的特点有哪些呢？抛弃table的兼容性、seo、加载等与本文无关的内容不谈，只看属性，那么就两个特点：

1.同行等高。

2.宽度自动调节。

那么table-cell是不是具备这个特点呢？答案是yes，为什么呢？css中有一个有意思的规则“创建匿名表格元素”。拿table-cell来扯，就是，当某个元素被设置为display:table-cell的时候，如果她的父节点不是display：table-row，爷爷节点不是display:table，那么下面就是见证奇迹的时候，这个儿子生出了他的爸爸和爷爷（浏览器会自动创建者两个匿名盒对象）虽然你找不到你的father 和 grandfather，但这确实发生了，这真的是不可思议的事情，哪里不可思议，没有掌声最不可思议。^_^

那么下面来看几种情况，帮助我们了解这个不可思议的事情。我先编写代码如下：

  
 
 
 
   
  
  
       
  
  
      div{padding:10px 0;}     
  
  
      .classtd,     
  
  
      td{height:34px; padding:10px; margin:10px; border:1px solid #ccc; vertical-align:middle;}     
  
  
      .classtd{display:table-cell; border-color:#cc0;}     
  
  
       
  
  
  tom

jack

.classtd{padding:10px; margin:10px; border:1px solid #ccc; vertical-align: top;}
.classtd{display:table-cell; border-color:#cc0;}
大人。其实我觉得大家别问元芳，元芳不是神人，也不会武功，也许还是个智障，我就不信我在这里黑元芳他会突然飞檐走壁来到我身后把我的头按在键盘上yu7jhklhgjkfgt;/.";. yujh bnujm798u7jrtb5 tq1qwsewrt5
我和左边等高

.classtd{ display: table-cell; padding:10px;margin:10px;border:1px solid #ccc;}
.classtd div{ display: inline-block; vertical-align: middle;}
div+css
javascript
HTML5
CSS3

.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;}
我是左边栏目
我是自适应的右边