Question

我有一个给定的标记，我正在尝试应用于某些样式。标记很少（但有些）灵活性，如果可能的话，理想情况下只想在CSS中执行此操作。

每个<li>的div都是基于内容的可变高度，但最后，我想最终得到所有<li> s相等的高度（最大列的高度）

这样做的最佳方式是什么？

<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> s或
使用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

一个想法是将ul包装在div中。设置div的高度。将ul / li设置为height：100％。 - 不确定这是否有效。如果你使用spans / div而不是li，它会。

或者，您可以在加载后使用javascript查找所有高度，然后返回并将高度设置为最大找到高度。

Answer 5

明确的工作解决方案：两者;属性

 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"});
    }

demo

如何使用<ul>创建具有非均匀高度</ul>元素的表格行

5 个答案: