多列div与CSS的等列高度

我知道这是一个老问题，但仍然无法获得任何可行的CSS解决方案。多列div与CSS的等列高度

箱子应该在高度上增长以适应所有的动态内容。最大高度的盒子应该设置所有其他盒子的高度，这样所有盒子的高度都相同。

注意：
1）它应该工作，直到IE-8。而且可能有太多的盒子，所以不要把它限制在2或3盒。
2）我尝试了填充底部，负边距底部和表格单元格方法。不能使用弹性框，因为它不支持IE9。
3）不能改变HTML结构。

HTML：

<ul> 
    <li> 
    <div class="tile"> 
    <div class="img"><img src="http://placehold.it/100x50"> 
    </div> 
    <div class="name"> 
     Lorum Ipsum Lorum 
    </div> 
    </div> 
    </li> 

    <li> 
    <div class="tile"> 
    <div class="img"><img src="http://placehold.it/100x50"> 
    </div> 
    <div class="name"> 
     Lorum Ipsum Lorum Lorum Ipsum Lorum 
    </div> 
    </div> 
    </li> 

    <li> 
    <div class="tile"> 
    <div class="img"><img src="http://placehold.it/100x50"> 
    </div> 
    <div class="name"> 
     Lorum Ipsum Lorum Lorum Ipsum Lorum 
    </div> 
    </div> 
    </li> 

    <li> 
    <div class="tile"> 
    <div class="img"><img src="http://placehold.it/100x50"> 
    </div> 
    <div class="name"> 
     Lorum Ipsum Lorum 
    </div> 
    </div> 
    </li> 

    <li> 
    <div class="tile"> 
    <div class="img"><img src="http://placehold.it/100x50"> 
    </div> 
    <div class="name"> 
     Lorum Ipsum Lorum 
    </div> 
    </div> 
    </li> 
</ul>

CSS：

ul{ 
    margin:0; 
    padding:0; 
    width:600px; 
    margin:0 auto; 
    border:#999 solid 1px; 
    border-bottom:none; 
    border-right:none; 
    overflow:hidden; 
} 
li{ 
    float:left; 
    list-style:none; 
    width:25%; 
    padding:0; 
    margin:0; 
    box-sizing:border-box; 
    border-right:#999 solid 1px; 
    border-bottom:#999 solid 1px; 
    text-align:center; 
    padding:5px; 
}

例如：http://codepen.io/anon/pen/GFeoc

来源

2014-10-30 Praveen

可能重复[CSS - 高度相等列？] （http://stackoverflow.com/questions/2114757/css-equal-height-columns） – 2014-10-30 19:48:51

这：http://brm.io/jquery-match-height/ – 2014-10-30 20:04:01

一些简单的JavaScript（jQuery的）会做的伎俩。

DEMO

equalHeight($('.tile')); 

function equalHeight(group) { 
    tallest = 0; 
    group.each(function() { 
    thisHeight = $(this).height(); 
    if(thisHeight > tallest) { 
     tallest = thisHeight; 
    } 
    }); 
    group.height(tallest); 
}

来源

2014-10-30 20:00:51 Schmalzy

的CSS解决方案，请尝试在li选择与display:table-cell更换float:left，并添加display:table; table-layout:fixed您ul选择。

Example

来源

2014-10-30 21:53:17 Talmid

我需要多个相邻的行。所以它不适用于我 – Praveen 2014-10-31 06:23:54

这是非常简单的，这个添加到CodePen您的js文件，它会工作：

$(document).ready(function() { 
    var heights = $("li").map(function() { 
     return $(this).height(); 
    }).get(), 

    maxHeight = Math.max.apply(null, heights); 

    $("li").height(maxHeight); 
});

入住这里http://codepen.io/anon/pen/IFmkq

的

来源

2014-10-30 23:39:58 paulalexandru

是的使用js是一个不错的选择。但我需要在这里的CSS解决方案。 – Praveen 2014-10-31 06:25:47

据我所知，问题是你不会找到一个，因为它不存在，或者确实存在，但它不适用于所有浏览器。 – paulalexandru 2014-10-31 07:14:50

多列div与CSS的等列高度

回答

相关问题