display:table-cellの応用

display:table-cellプロパティとは、tdラベルと同様にラベル要素を表セルとして表示することです.IE 6,IE 7はこの属性に互換性がありません.
特徴1同業者等高(等高レイアウトに使用可能)2幅自動調整(左固定右適応に使用可能)
注意事項は、他のdisplayプロパティと同様に、table-cellもfloat、position:absoluteなどの他のcssプロパティによって破壊されます.display:table-cellを設定した要素は幅に敏感で、margin値に反応せず、padding属性に応答し、基本的にtdラベル要素である.
未知の幅の高い要素を適用し、垂直方向に中央に配置

.box{
  width:200px;
  height:200px;
  display:table-cell;
  vertical-align:middle;
  text-align:center;
}
span{
  display:inline-block;
}


     

左固定、右アダプティブ

.left{
  float:left;
  width:200px;
  height:300px;
  background:red;
}
.right{
  display:table-cell;
  width:2000px;(      )
}

等高布局
考虑到匿名创建表格元素的问题，所有table-cell元素外一定要留有一个用来包裹的标签。于是，我们有类似下面的CSS代码：

.list-row{
  display:table-row;
}
.list-cell{
  display:table-cell; 
  width:50%;
}


  
       
  
                ..