纯CSS实现多列等高

最新推荐文章于 2025-09-10 13:02:12 发布

weixin_30569153

最新推荐文章于 2025-09-10 13:02:12 发布

阅读量87

点赞数

CC 4.0 BY-SA版权

文章标签： xhtml 操作系统

原文链接：http://www.cnblogs.com/didi/archive/2010/04/19/1715440.html

今天看了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，这个数值不能太小，否则超过这个高度后，等高就无效了，所以这个数值一定要足够大。

转载于:https://www.cnblogs.com/didi/archive/2010/04/19/1715440.html