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

    随着ie6的退出,我发现以前好多不敢使用的属性可以使用了,先庆祝一下。

    最近我要做一些页面,页面是交给程序猿使用的,程序猿是新手,对于样式什么的完全不懂(最让人发愁就是什么都不懂的人)。

    由于某些原因,这些页面只需要兼容ie8以上的浏览器和现代浏览器就可以了。

    我在做的时候使用了一下diaplay:table-cell,我发现了一些有意思的事,记录档案之中,原因未找到

    <style type="text/css">
    *{ margin:0; padding:0;}
    .pre,.next{ 100px; height:100px; background:green;}
    
    .table{ 500px; height:300px; border:1px solid red;}
    .tr{ display:table-row;}
    .td{ display:table-cell; height:100px; 100px; background:#000; border:1px solid #fff; color:#fff;}
    </style>
    </head>
    <body>
    <div class="table">
    <div class="tr">
        	<div class="td">02215太塔木德神奇啦太塔木德神奇啦太塔木德神奇啦太塔木德神奇啦太塔木德神奇啦太塔木德神奇啦太塔木德神奇啦太塔木德神奇啦太塔木德神奇啦太塔木德神奇啦太塔木德神奇啦</div>
            <div class="td">545151</div>
            <div class="td">545151</div>
            <div class="td"></div>
    </div>
    </div>
    

     这是一个模拟表格的方法吧,可能使用上有所不对,不过这不重要,重要的是,我发现在火狐下,如果几个display为table-cell的div并排显示的时候,你设置的高是多少,上面就会空出多少空间来,(注意这个只有在火狐下面有,其他的浏览器里都没有,包括ie8也没有),但是如果你在每一个div里面都写上字,所有的浏览器表现形式就都一样了,搞不明白,反正也在写,顺手记录一下,即使你设置的.td的宽,但是多了,还是会等比例缩小的,但是少了的话,宽度就是有左右的,这个应该跟真正的td是不一样的吧

  • 相关阅读:
    ZR#954 分组
    Hdu5178
    最大熵模型
    Mysql学习
    稀疏编码(Sparse Coding)的前世今生(一) 转自http://blog.csdn.net/marvin521/article/details/8980853
    机器学习中的相似性度量
    ORACLE的字符串操作函数
    spark shuffle
    sprak 环境搭建的坑
    python 安装cx_Oracle模块, MySQLdb模块, Tornado
  • 原文地址:https://www.cnblogs.com/busicu/p/3342668.html
Copyright © 2011-2022 走看看