对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的应用，写出的 学习文档，有不对之处，还望大家指正。

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

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