如何創建一個類似於表的行 <ul> 具有不均勻高度的元素

Question

我有一個給定的標記，我正在嘗試應用於某些樣式。 標記很少（但有些）靈活性，如果可能的話，理想情況下只想在CSS中執行此操作。

每個<li>的div都是基於內容的可變高度，但最后，我想最終得到所有高度相等的<li> （最大列的高度）。

這樣做的最佳方式是什么？

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<title>Table row</title>
<style type="text/css" media="screen">
body {
    margin:0;
    padding:0;
}

ul
{
    list-style-type: none;
    background-color: yellow;
}

li
{
    display: inline-block;
}

li div
{
    width:200px;
}
</style>
</head>

<body>
<ul>
    <li>
        <div class="divA" style="background-color:red;">
        hello<br/>world
        </div>
    </li>
    <li>
        <div class="divB"  style="background-color:blue;"/>
        hello<br/>world hello<br/>world
        </div>
    </li>
    <li>
        <div class="divC" style="background-color:green;"/>
        hello<br/>world hello<br/>world hello<br/>world
        </div>
    </li>
    </ul>
</body>
</html>

Answer 1

如果您希望每個<li>都擁有最高<li>的高度，那么這些是您的選擇：

硬編碼<li>的高度，或
使用JavaScript以編程方式計算和應用高度，或
使用表格。

Answer 2

這是解決這個問題的好方法。

的jsfiddle

所做的只是將<li>標簽懸浮在左邊; 在父級ul關閉之后，我添加了一個帶有clear的空div：兩個css屬性。

注意浮動是有效的而不是折疊到下一行我向父元素添加了一個寬度，它可以是一個div，但在你的情況下是body元素。

Answer 3

我想這就是你要找的......

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

equalHeight($("li"));

http://jsfiddle.net/jasongennaro/p2we3/

代碼來自： http ： //www.cssnewbie.com/equal-height-columns-with-jquery/

Answer 4

明確的工作解決方案：兩者; 屬性

 var ch=$("#container").width();

    var itemsPerRow=Math.floor(ch/102);

    var itemsCount=$("#contentpane li").length;
    var loopRound=Math.floor(itemsCount/itemsPerRow);

    for(var i=1;i<loopRound+1;i++)
    {
        var nextFirstItem=i*itemsPerRow+1;

        $("#contentpane li:nth-child("+ nextFirstItem  +")").css({"clear":"both"});
    }

演示

Answer 5

一個想法是將ul包裝在div中。 設置div的高度。 將ul / li設置為height：100％。 - 不確定這是否有效。 如果你使用spans / div而不是li，它會。

或者，您可以在加載后使用javascript查找所有高度，然后返回並將高度設置為最大找到高度。

如何創建一個類似於表的行 <ul> 具有不均勻高度的元素

問題描述

5 個解決方案

解決方案1
2 已采納 2011-06-17 03:34:30

解決方案2
1 2011-06-17 03:35:09

解決方案3
1 2011-06-17 04:24:39

解決方案4
0 2013-04-03 11:08:41

解決方案5
0 2011-06-17 03:32:27

如何創建一個類似於表的行 <ul> 具有不均勻高度的元素

問題描述

5 個解決方案

解決方案1 2 已采納 2011-06-17 03:34:30

解決方案2 1 2011-06-17 03:35:09

解決方案3 1 2011-06-17 04:24:39

解決方案4 0 2013-04-03 11:08:41

解決方案5 0 2011-06-17 03:32:27

解決方案1
2 已采納 2011-06-17 03:34:30

解決方案2
1 2011-06-17 03:35:09

解決方案3
1 2011-06-17 04:24:39

解決方案4
0 2013-04-03 11:08:41

解決方案5
0 2011-06-17 03:32:27