Question

Here’s what I'm working with.

正如你所看到的，我有很多块元素，我想进入五列。

然而，由于它们的高度不同，它们对漂浮的反应不佳。（因此页面中间有一个巨大的洞。）

我知道我已经看到了一个JS解决方法，它计算了高度，并将元素放在适合的位置，但我不能为我的生活现在找到它 - 任何人都记得它，或者有任何其他的想法？ ;）

Answer 1

也许你想要的是： http://desandro.com/resources/jquery-masonry/

可以配置。

Answer 2

您可以通过简单地为每5个样式为clear:both

的浮动元素添加一个块来修复您的情况

示例：

<article class="bloggpost"></article>
<article class="bloggpost"></article>
<article class="bloggpost"></article>
<article class="bloggpost"></article>
<article class="bloggpost"></article>
<div style='clear:both'></div>

Answer 3

如果您不介意依赖JS进行正确的布局，为什么不设置五个<div>元素，比如列，每个元素都有一定的宽度（您可以给它们一个HTML类然后设置他们的宽度动态如果你选择）？您可以总计块元素的高度，然后使用JS告诉它有多少要放入每列<div>。这可以在onresize事件上动态生效。代码编写起来非常简单，如果你使用的是jQuery，那就更好了。

Answer 4

如果你不介意每个元素与最高的高度一样尝试这个函数（jquery）：

function evenHeights(element) {
    var x = 0;
    $(element).each(function(){
        var h = $(this).height();
        if (h > x) x = h;
    });

    $(element).each(function() {
        var thumbHeight = x;
        $(this).height(thumbHeight);
    });
}

并在evenHeights($(".bloggpost"));

中致电$(document).ready(function()

CSS / JS：不同高度的浮动块元素？

4 个答案: