对display:table-cell的学习

我已经沉浸在周末前一天的愉快氛围里无法自拔。

1、简介

今天来学习一下display的一个值，table-cell

W3C上面关于这个属性值的解释 是它会作为一个表格单元格显示（类似td和th）

ie兼容性：支持到ie8+

注意：table-cell 在使用的时候容易被其他一些css属性所影响，对元素的高度宽度非常敏感，margin值对其不起作用，但是可以设置其padding值。

2、功能

（1）display:table-cell与大小不固定元素的垂直居中

~~~~~~~~

对于两个宽度和高度不同的图片，我想达到的效果是

为此，我在两个img的外层分别包了一个div，html代码如下：

 <div>       <a href="http://placehold.it"><img src="http://placehold.it/150X150"></a> </div>  <div>      <a href="http://placehold.it"><img src="http://placehold.it/150X100"></a> </div>

一开始效果如下：

我来改造一下，通过给外层div加style样式，具体css代码如下：

      div {        width: 200px;        height: 200px;        border: 1px solid red;        display: table-cell;        text-align: center;        vertical-align: middle;      }      div img {        vertical-align: middle;      }

效果就出来了

   （2）实现两栏自适应布局

先po上html代码来：

<div class="main">       <a href="http://placehold.it"><img src="http://placehold.it/150X150"></a>     <div class="text">         <p><b>宋dong野</b> 歌手一枚</p>         <p>歌名：安和桥</p>        <p>歌词：我知道那些夏天就想青春一样回不来，代替梦想的，也只是满怀期待；我知道吹过的牛逼也会随青春一笑了之，而我困在城市里，怀念你。我知道那些夏天就想青春一样回不来，代替梦想的，也只是满怀期待；我知道吹过的牛逼也会随青春一笑了之，而我困在城市里，怀念你。</p>    </div></div>

css代码：

 .main {    width: 60%;     margin: 60px auto 0;     padding: 20px;     background: yellow;     display: table;  }  .main img {     margin-right: 21px;  }  .text {     display: table-cell;     *display: inline-block;  }  .main:after,  .main:before {     display: table;     content: "";     clear: both;  }

其中，*display:inline-block 是针对ie6/7的，因为ie6/7是不识别display:table-cell的，并且也无法精准地通过inline-block实现自适应，会使文字跑偏到头像的右下方。

效果：

（3） 等高布局

还是先上效果图吧：

html代码 ：

 <div class="wrap">      <div class="main">       <div>迷路的鸽子呀，它在双手合十的晚上，渴望一双翅膀，飞去南方，南方。明天冰雪封山的时候 我也光着双脚，站在你翻山越岭的尽头，正当年少，两千个秘密 没人知道，请你在春天到来的时候 轻轻歌唱，唱一首关于冬天的歌谣 漫漫长长</div>       <div>借我十年，借我网名天涯的勇敢。借我说得出口的淡淡誓言，　借我孤绝如初见,借我不惧碾压的鲜活,借我生猛与莽撞不问明天,借我一束光照亮黯淡,借我笑颜灿烂如春天,借我杀死庸碌的情怀,借我纵容的悲怆与哭喊,借我怦然心动如往昔, 借我安适的清晨与傍晚</div>       <div>谁说月亮上不曾有青草, 谁说可可西里没有海, 谁说太平洋底燃不起篝火, 谁说世界尽头没人听我唱歌, 谁说戈壁滩不曾有灯塔, 谁说可可西里没有海, 谁说拉拇拉措吻不到沙漠, 谁说我的目光流淌不成河</div>     </div>   </div>

css代码：

 .main {     display: table;  }  .main div {     width: 250px;      height: 300px;      display: table-cell;      padding: 1.6%;  }  .main div:nth-child(1) {      background: red  }  .main div:nth-child(2) {    background: green  }  .main div:nth-child(3) {    background: yellow  }

3、写在最后面

本文只是参考张鑫旭大神的我所知道的几种display:table-cell的应用，写出的学习文档，有不对之处，还望大家指正。

文中歌词分别出自：《安和桥》《鸽子》《借我》《陪我到可可西里去看海》，仅个人喜好，不喜勿喷。

**************************学无止境***********************************************