Question

你可以看看我的小提琴here。它们之间有空格，但我希望它们在彼此之上。我怎样才能用jQuery实现这个目标？我尝试使用Masonry，但这段代码没有帮助：

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

编辑：任何人都可以请小提琴工作吗？

Answer 1

试试这个

  $(function(){

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

}）;

<强> DEMO

Answer 2

听起来你想要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，如上文

中所述

如何将不同高度的div对齐？

2 个答案: