对display:table-cell的学习

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


1、简介

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

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

ie兼容性:支持到ie8+

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

2、功能

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

~~~~~~~~
对于两个宽度和高度不同的图片,我想达到的效果是
对display:table-cell的学习_第1张图片

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



一开始效果如下:
对display:table-cell的学习_第2张图片
改造一下,通过给外层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代码来:

宋dong野 歌手一枚

歌名:安和桥

歌词:我知道那些夏天就想青春一样回不来,代替梦想的,也只是满怀期待;我知道吹过的牛逼也会随青春一笑了之,而我困在城市里,怀念你。我知道那些夏天就想青春一样回不来,代替梦想的,也只是满怀期待;我知道吹过的牛逼也会随青春一笑了之,而我困在城市里,怀念你。



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实现自适应,会使文字跑偏到头像的右下方。
效果:

对display:table-cell的学习_第3张图片

3 等高布局
还是先上效果图吧:
对display:table-cell的学习_第4张图片


html代码

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



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

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









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

你可能感兴趣的:(技术类)