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：不同高度的浮動塊元素？

回答

相關問題