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

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 代替浮动。
因此，当涉及到另一个“行”时，它实际上是一个全新的行，下一个列表项将位于其中。