多列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的等列高度

回答

相關問題