jquery - 带有装订线的 masonry 网格尺寸器在 50% 尺寸上未正确对齐

Question

我有 grid-sizer masonry 和一个 50% 的 div。我还设置了一个“10”的间距，但它似乎并没有相应地均衡这些框。

红色框未与整个容器对齐。 .w2 红色框的宽度为 %49 以使装订线(边距)出现。如果我将其设置为 50%，div 将对齐，但装订线将不会与其他的一样相等。

如何使用 grid-sizer 和 10 的间距完美对齐 div？

See my fiddle here...

这是我的代码:

var $container = $('#container');
$container.isotope({
masonry: {
columnWidth: '.grid-sizer',
       gutter: 10
},
itemSelector: '.item'
});

Answer 1

您使用的装订线尺寸不是动态的。间距大小应在 css 中声明。

更新代码:

var $container = $('#container');
// init
$container.isotope({
// options
masonry: {
  columnWidth: '.grid-sizer',
  gutter: '.gutter-sizer'
},
itemSelector: '.item'
});

CSS:

.gutter-sizer { width: 1%; }

Updated Fiddle here