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砌体可能就是你想要的，然后：http://masonry.desandro.com/它解决了浮动divs -t-have-balanced-height问题。

多列列表中的高度差异

2 个答案: