Question

我有一个项目列表<li>，列表中的项目数是动态的，内容也是如此。该列表每行有4个项目，由float:left定义。每个项目的高度都是动态的，因此下一行中的项目会在上一行的最高项目之前“卡住”。它导致视觉上丑陋的列表，并且没有填充行。

如何强制每行中的所有项目都是最高行的高度？或者，如何强制列表中的所有项目都是列表中最高项目的高度？

由于

更新最终的解决方案是：

<script type='text/javascript'>
$(document).ready(function() {
    var maxHeight = -1;
    var currHeight = -1;
    var prodDescHeight = -1;
    var diffHeight = -1;
    // get the max height of the list items
    $('.my_li_class').each(function() {
        maxHeight = maxHeight > $(this).height() ? maxHeight : $(this).height();
    });
    // set max height to all items 
    $('.my_li_class').each(function() {
        $(this).height(maxHeight);
    });
});

Answer 1

使用display：inline-block而不是浮动。
因此，当涉及到另一个“行”时，它实际上是一个全新的行，下一个列表项将会存在。

强制每行列表中的所有项目具有相同的高度（每个项目具有动态高度）

1 个答案: