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

Here’s what I'm working with.CSS/JS：不同高度的浮动块元素？

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

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

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

来源

2010-09-16 Twisted Intellect

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

它的配置。

来源

2010-09-16 12:12:07

这就是/我正在寻找的剧本;非常感谢！ – 2010-09-16 15:25:11

可以实际上干脆把块有clear:both

例子的风格，每5个浮动元素弥补你的情况：

<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>

来源

2010-09-16 00:41:53 lock

显然，一个伟大的小费中调用evenHeights($(".bloggpost"));;唯一不足的是，我仍然在最短的时间里得到了一个空缺 - 我曾经看到过的雪人式JS解决方案，但不再存在，甚至不存在，甚至修复了这个问题 - 但却是一个很好的提示！ – 2010-09-16 00:46:27

如果你不介意依靠JS为了适当的布局，为什么不设置五个<div>元素，比如列，每个元素都有一定的宽度（如果你选择，你可以给他们一个HTML类，然后设置它们的宽度）？您可以总计块元素的高度，然后使用JS来告诉它要将多少个元素放入每列<div>。这可以在onresize事件中动态工作。代码将非常容易编写，甚至更多如果您使用jQuery。

来源

2010-09-16 02:08:34

如果你不介意的每一个元素是相同的高度最高试试这个功能（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); 
    }); 
}

和你$(document).ready(function()

来源

2010-09-24 13:42:50 graham

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

回答

相关问题