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

    我们在使用表格的时候,会看到表格中的单元格一般具有怎么样的特点呢?文字的垂直居中对齐,关联伸缩等等,这些都是表格单元格具有的特点。而display:table-cell可以让元素具有这些特点!

    这个属性可以使得我们在布局时候实现下面三个功能:

    (1)图片垂直居中于元素(在其他随笔中有记录,略)

    (2)等高布局

    同一行的单元格td元素高度是相等的,因此,table-cell也是具备这个特点。

    eg:

    <!doctype html>
    <html>
    <head>
    <title></title>
    <style type="text/css">
    #wrapper{display:table-row;}
    #img-box{
    display:table-cell;                 
    150px;
    vertical-align:middle;            /*垂直居中*/
    text-align:center;                 /*水平居中*/
    border:1px solid red;
    }
    #text-box{
    display:table-cell;
    200px;
    border:1px solid red;
    border-left:none;
    padding:10px;
    }
    </style>
    </head>
    <body>
    <div id="wrapper">
    <div id="img-box"><img src="images/haizeil.png" alt=""/></div>
    <div id="text-box"><p>这是一段文字</p></div>
    </div>
    </body>
    </html>
    

      在这个例子中,我们在左右两个盒子中都没有加上高度,但是两个盒子的高度都刚好相等,这就是自适应等高布局。高度由两者间最大的高度而决定

    (3)自动平均划分元素,并且在一行显示

    要让无序列表横向布局,我们通常会改变它的display属性为inline-block元素或是将其定义为浮动元素。但是我们可以利用display:table-cell来解决,并且还能自动平均划分元素。

    语法:

    #father{display:table;}
    #son{display:table-cell;}
    

      只要给父元素定义宽度,就会自动划分子元素们

    补充:去除inline-block元素间距

    inline-block元素之间是有间距,这会影响我们的布局,可以使用font-size:0;来去除这个情况

    语法:

    #father{font-size:0;}
    

      

  • 相关阅读:
    《C# to IL》第一章 IL入门
    multiple users to one ec2 instance setup
    Route53 health check与 Cloudwatch alarm 没法绑定
    rsync aws ec2 pem
    通过jvm 查看死锁
    wait, notify 使用清晰讲解
    for aws associate exam
    docker 容器不能联网
    本地运行aws lambda credential 配置 (missing credential config error)
    Cannot connect to the Docker daemon. Is 'docker daemon' running on this host?
  • 原文地址:https://www.cnblogs.com/runhua/p/6429290.html
Copyright © 2011-2022 走看看