0

リストのアイテムがあり、リスト<li>内のアイテムの数は動的であり、コンテンツも同様です。リストには、 で定義された 1 行あたり 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);
    });
});

4

1 に答える 1

1

フローティングの代わりに display:inline-block を使用してください。
したがって、別の「行」になると、実際には次のリスト項目が配置されるまったく新しい行になります。

于 2013-06-09T17:27:11.940 に答える