• 纯CSS实现多列等高




    今天看了hemin五种实现等高方法受益匪浅,感觉最实用的也就是第一种的"边距实现",利用 padding-bottom:10000px;margin-bottom:-10000px 的思想很巧妙。很容易就能实现两列和多列等高,完整代码:



    overflow-negtive-margin--多列高边距实现

    overflow-negtive-margin多列高边距实现
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>overflow-negtive-margin--多列高边距实现</title>
    <style type="text/css">
    body
    {
        font-size
    :12px;
        font-family
    :'微软雅黑';
        line-height
    :1.8;
    }
    .parent
    {
        width
    :900px;
        overflow
    :hidden;
        zoom
    :1;
    }
    .child
    {
        float
    :left;
        display
    :inline;
        width
    :250px;
        min-height
    :80px;
        margin-right
    :10px;
        padding
    :8px 12px 0;
        padding-bottom
    :800px;
        margin-bottom
    :-800px;
        color
    :#FFF;
    }
    </style>
    </head>

    <body>
    <div class="parent">
        
    <div class="child" style="background:red;">
            据知情人士透露, 谷歌按计划将于美国时间11月18日推出ChromeOS,届时这一备受关注的将首度正式向外界展露真容。据悉,中国团队此前已参与到这系统的开发之中。上周五晚间国外媒体报道称,谷歌将于本周发布Chrome OS操作系统。
        
    </div>
        
    <div class="child" style="background:blue;">
            11月16日凌晨消息,搜狐腾讯因旗下拼音输入法互相提起不正当竞争诉讼,均向对方索赔2000元。其中搜狗诉腾讯拼音输入法侵权案今日9时将在北京二中院公开审理,腾讯起诉搜狗拼音输入法不正当竞争案也北京一中院受理。
            
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
        
    </div>
        
    <div class="child" style="background:orange;">
            新闻频道《24小时》邱启明,一直是幽默风趣平实的播报风格,很受观众欢迎。不过上周,邱启明在播报一条英国经济学大师、伦敦商学院教授理查德波茨的新闻时却因幽默过头招来板砖。波茨称中国当前问题是消费不足,解决这一问题行之有效的办法是提高中国人的工资,消费水平上去后,将比其他经济政策更有利于促进经济平衡。对此,邱启明说:“但愿啊,多涨点。其实咱们涨工资没停啊。只是中国老百姓习惯存钱,发得再多,我不买。”
        
    </div>
    </div>
    </body>
    </html>

    利用父层的overflow:hidden和子层的negtive margin实现两列等高,

    zoom:1用来清除IE6的浮动

    利用CSS实现多列等高的缺点是要设置一个很大的padding-bottom和margin-bottom,这个数值不能太小,否则超过这个高度后,等高就无效了,所以这个数值一定要足够大。

  • 相关阅读:
    hadoop文件写入
    elastic(10) 基本查询
    hadoop 小知识点
    "hadoop namenode -format"命令的作用和影响的文件
    elastic(9)映射
    Linux 学习笔记之 --- epoll 事件模型详解
    Linux 学习笔记之 --- select 与 poll 事件模型详解
    Tornado 高并发源码分析之二---Tornado启动和请求处理流程
    Tornado 高并发源码分析之五--- IOLoop 对象
    Tornado 高并发源码分析之四--- HTTPServer 与 TCPServer 对象
  • 原文地址:https://www.cnblogs.com/didi/p/1715440.html
Copyright © 2020-2023  润新知