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

原文地址:https://www.cnblogs.com/didi/p/1715440.html