如何將不同高度的div對齊在一起？

你可以看看我的小提琴here。他們之間有空間，但我希望他們互相頂上。我怎樣才能完成這與jQuery？我試過使用砌體，但這段代碼沒有幫助：如何將不同高度的div對齊在一起？

(function(){ 
var $container = $('.rss'); 
$container.imagesLoaded(function(){ 
    $container.masonry({ 
    itemSelector : '.item', 
    columnWidth : 210 
    }); 
}); 
})();

編輯：任何人都可以讓小提琴的工作？

來源

2013-01-09 user1961106

如果我是你，我會使用砌體，但如果你真的不想超過你需要做的功能，可以計算不同大小的div，使他們位置絕對，並計算哪裏有空間放置他們 – Chanckjh

那麼，我用在那裏的功能不起作用，我不知道會有什麼幫助。你能幫我嗎？ – user1961106

試試這個

$(function(){ 

$('#container').masonry({ 
    itemSelector: '.box', 
    isAnimated: true 
});

}）;

DEMO

來源

2013-01-09 11:26:48 Sowmya

我使用最大寬度，由於某種原因，它使得容器變得非常小，而不是我設置的最大值... – user1961106

聽起來像是你想要的CSS替代磚石：

http://sickdesigner.com/masonry-css-getting-awesome-with-css3/

它使用CSS3 列數財產分割父容器，這意味着設置寬度：100％;到子容器獲取父寬度的三分之一，而不是全寬。

範例CSS：

.container { 
    -moz-column-count: 3; 
    -moz-column-gap: 10px; 
    -webkit-column-count: 3; 
    -webkit-column-gap: 10px; 
    column-count: 3; 
    column-gap: 10px; 
    width: 900px 
} 
.container div { 
    display: inline-block; /* Display inline-block, and absolutely NO FLOATS! */ 
    margin-bottom: 20px; 
    width: 100%; 
}

演示了這個有它設置爲一個列表：

http://sickdesigner.com/demo/css-masonry/css-masonry.html

這是基於你的榜樣小提琴： http://jsfiddle.net/SHZ2G/2/

僅供參考，如上面的文章

中所述，仍然可以使用石工來實現IE兼容性

來源

2013-01-09 11:34:08 reekogi

即使演示在FF或Chrome中也不適用於我：X – user1961106

對不起，更新了jsfiddle鏈接 - > http://jsfiddle.net/SHZ2G/2/ – reekogi

如何將不同高度的div對齊在一起？

回答

相關問題