jquery - 带有排水沟的砌体网格尺寸在 50% 尺寸上未正确对齐

Question

我有网格大小的砖石和一个 50% 的 div。我也放了一个“10”的排水沟，但它似乎并没有相应地平衡盒子。

红色框与整个容器不对齐。.w2 红色框的宽度为 %49，以显示装订线（边距）。如果我将其设为 50%，则 div 将对齐，但排水沟将不会与其他 div 一样。

如何使用 grid-sizer 和 10 的装订线完美对齐 div？

在这里看我的小提琴......

这是我的代码：

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%; }

在这里更新了小提琴