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

【问题标题】：Masonry Grid-sizer with gutter not aligning correctly on 50% size带有排水沟的砌体网格尺寸在 50% 尺寸上未正确对齐
【发布时间】：2014-05-20 03:33:35
【问题描述】：

我有 grid-sizer 砌体和一个 50% 的 div。我也放了一个“10”的排水沟，但它似乎并没有相应地平衡盒子。

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

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

See my fiddle here...

这是我的代码：

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

【问题讨论】：

标签： jquery css masonry

【解决方案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

【讨论】：