zoukankan      html  css  js  c++  java
  • display:table-cell

    一、display:table-cell属性简述

    目前IE8+以及其他现代浏览器都是支持此属性的,但是IE6/7只能对你说sorry。单元格有一些比较特别的属性,例如元素的垂直居中对齐,关联伸缩等,所以display:table-cell还是有不少潜在的使用价值的,虽说IE6/7不支持此属性,但是幸运的是,IE6/7一些乱糟糟的属性与渲染,我们可以其他方法实现同样或是类似的效果。与其他一些display属性类似,table-cell同样会被其他一些CSS属性破坏,例如floatposition:absolute,所以,在使用display:table-cellfloat:left或是position:absolute属性尽量不用同用。设置了display:table-cell的元素对宽度高度敏感,对margin值无反应,响应padding属性,基本上就是活脱脱的一个td标签元素了。

    二、display:table-cell与大小不固定元素的垂直居中

    使用display:table-cell让大小不固定元素垂直居中已经是很老的方法了,

    三、display:table-cell与两栏自适应布局

    display:table-cell可以用在两栏的自适应布局上。

    代码展示:
    本例中,左侧为头像,右侧内容自适应。其中头像部分使用了float属性,左浮动,IE8+以及Firefox、Chrome、Opera等现代浏览器右侧使用了display:table-cell属性,结果就自适应了,很简单的代码,很神奇的效果。OK,对于不认识display:table-cell属性的IE6/7呢?哦呵呵,很简单,使用display:inline-block属性代替display:table-cell就完全ok的啦!

    display:table-cell; *display:inline-block;就万事大吉,收工回家了。

    在本例demo中,右侧内容足够多,所以宽度完整的撑开了,如果内容有限,则宽度就是内容的宽度,此时想要让某个元素(例如关闭按钮)右侧定位就会有问题,解决方法就是定义一个非常宽的宽度,就像上面facebook截图中的CSS属性一样,所以,考虑到各种情况,更健壮耐用的CSS代码应如下:

    display:table-cell; *display:inline-block; 2000px; *auto;

    或者使用:

    display:table-cell;  2000px; *auto; *zoom:1; 

    四、display:table-cell下的等高布局

    实现等高布局,毫无疑问,display:table-cell是首选,这就好比鼹鼠,生下来就是为了打洞用的。考虑到匿名创建表格元素的问题,所有table-cell元素外一定要留有一个用来包裹的标签。于是,我们有类似下面的CSS代码:

    .list_row{display:table-row;}
    .list_cell{display:table-cell; 30%; padding:1.6%; background-color:#f5f5f5;}
    /*中间一个元素背景淡蓝,有别于两边的淡灰色*/
    .list_center{background-color:#f0f3f9;}

    对于不支持display:table-cell属性的IE6/7浏览器,又当如何解决呢?
    我们可以使用“补差等高法”,就是一个一个很大的margin-bottom负值配上一个同样大小的padding-bottom值,本例中为了实例需要,margin-bottom值就百来像素。显然,由于两者原理不同,难免需要用到hack,所以demo完整CSS代码如下:

    .list_row{display:table-row; overflow:hidden;}
    .list_cell{display:table-cell; 30%; margin-bottom:-100px; padding:1.6%; *padding-bottom:110px; background-color:#f5f5f5; *float:left;}
    .list_center{background-color:#f0f3f9;}
    

    认识display:table-cell属性的元素对margin属性不敏感,所以上面margin-bottom属性前没有加*号。HTML结构代码如下:

    <div class="list_row">
        <div class="list_cell">你一定也有过这种感觉的。...罗兰《寂寞的感觉》</div>
        <div class="list_cell list_center">作为一个被基阿异捅过...水,四积阴功五读书。</div>
        <div class="list_cell">奔波了一...永远幸福快乐!</div>
    </div>

    结果在现代浏览器下(如下Firefox3.6下截图):
    table-cell下的等高布局 张鑫旭-鑫空间-鑫生活

    display:table-cell下的列表布局最适用的场景是:列表个数不固定,但是,无论列表几个,都平分容器空间。什么意思呢?就是如果4个列表,希望每个宽度25%,3个就33.3333%,2个列表希望每个宽度50%。此时,没有比display:table-cell更合适的技术了。

    父级设置display:table-row同时宽度为容器宽度,或者直接100%,此时,display:table-cell子元素就会自动等分。

    ② 多行文字
    如何实现父容器高度固定,文字可能一行,两行或更多行的垂直居中对齐呢?
    实现的关键是把文字当图片处理。用一个span标签将所有的文字封装起来,设置文字与图片相同的display属性(inline-block属性),然后用处理图片垂直居中的方式处理文字的垂直居中即可。
    核心css代码如下,
    外部div标签:

    div{display:table-cell; 550px; height:1.14em; padding:0 0.1em; border:4px solid #beceeb; color:#069; font-size:10em; vertical-align:middle;}

    内部span标签:

    span{display:inline-block; font-size:0.1em; vertical-align:middle;}

    下面这张是实例演示页面的效果截图:

    行数不固定文字垂直居中对齐

    行数不固定文字垂直居中对齐

  • 相关阅读:
    (转载)C++ string中find() ,rfind() 等函数 用法总结及示例
    UVA 230 Borrowers (STL 行读入的处理 重载小于号)
    UVA 12100 打印队列(STL deque)
    uva 12096 The SetStack Computer(STL set的各种库函数 交集 并集 插入迭代器)
    uva 1592 Database (STL)
    HDU 1087 Super Jumping! Jumping! Jumping!
    hdu 1176 免费馅饼
    HDU 1003 Max Sum
    转战HDU
    hust 1227 Join Together
  • 原文地址:https://www.cnblogs.com/cina33blogs/p/7595735.html
Copyright © 2011-2022 走看看