html - 多列列表中的高度差

Question

我创建了多列列表。在每个列表中都有一个 div 。由于这个添加的 div 的高度，因此在这一行和下一行之间出现了一个空格。是否有任何方法来扩展这一行以填充空白空间或调出下一行。

<ul>
    <li>1</li>
    <li>2</li>
    <li>3
        <div class="exp">abc abc</div></li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
</ul>

问题在这里解释http://jsfiddle.net/DPRtF/18/（见 3 和 6 之间）

Answer 1

如果我了解您要查找的内容，我认为您需要一些 javascript。

我在这里所做的是将一个小脚本放在一起，该脚本循环遍历所有框并找到最大的一个，然后将该高度添加到所有框。这样空白就消失了。

代码需要一些清理，但它证明了这一点。

http://jsfiddle.net/E2K8c/

var highestBox = jQuery('li:first');
jQuery('li').each(function() {
    if (jQuery(this).height() > highestBox.height())
        highestBox = jQuery(this);
});
jQuery('li').height(highestBox.height());

Answer 2

jQuery Masonry 可能是您想要的，然后： http: //masonry.desandro.com/它解决了浮动 divs-don't-have-balanced-height 问题。