2

我在一个容器中有多个<div>相同width但不同的标签。height当浏览器resized和<div>元素重新排列时，它们之间会有很多空格。例如下面的 HTML：

<div class="wrap">
    <div class="box">
        This has less height
    </div>
    <div class="box">
        This has more height
    </div>
    <div class="box">
        This has less height.
    </div>
</div>

现在，当浏览器调整大小时，最后一个 div 将移动到第一个 div 下方的左侧，但它们之间有空白空间，因为中间 div 具有更高的高度。请看图片。

在此处输入图像描述 是否可以使用纯 CSS 排列这些 div？我找不到方法，所以我尝试了 jQuery masonry plugin，它工作正常，但问题是它通常不会快速响应（例如，当你第一次打开页面时，布局完全混乱，但如果你刷新页面会很好）。

因此，如果仅使用 CSS 是不可能的，有没有办法让它在没有复杂插件的情况下工作（例如仅使用 jQuery？）

jsFiddle：http: //jsfiddle.net/HS2Zh/

4

2 回答 2

1

如果您的任务是消除差距，您可以使用此代码删除它

            var h = 0;
            $('.box').each(function() 
            { 
                h = Math.max(h, $(this).height()); 
            }).height(h);

它将唯一的高度（.box 的最大高度）分配给所有 .box 类

于 2012-09-05T09:59:04.667 回答
0

这可以通过使用 jquery masonry 插件来完成。希望此链接对您有所帮助http://masonry.desandro.com/

如果您已经在使用该插件，请尝试在块之间留出一些间隙，以便它有自由空间流动

于 2012-09-05T09:57:18.773 回答