我正在尝试创建一个简单的图像拼贴，并且由于这个问题需要使用 Masonry：div grid of squares, float:left issue (image included)。
我认为这很简单，但我无法弄清楚我的实现有什么问题：http://classicopia.ivointeractive.com/。路径尽头的房子图片应该在右上角。间距是完美的 (970=2*291+388) 并且图像通过它的 float:left 属性获得位置，但砌体脚本将其拉出位置。
如果我增加整个容器的宽度，这两个图像会保持堆叠，但会向右移动。这是否意味着砌体无论如何只能创建 2 列？我将如何更改此号码？
【问题讨论】：
标签： jquery html css web jquery-masonry
砌体需要等宽的列才能正常工作。 .masonry-bricks 按照它们在 DOM 中出现的顺序排列在#container 中。如果您有跨越两列或一列半的大型 .masonry-bricks，您将无法获得合适的布局；另请参阅不适合的“秋季样式...” .col6 div。
请参阅http://masonry.desandro.com/demos/basic-multi-column.html，了解何时以及为何会出现差距。您将看到任何数量的列都是可能的，但布局取决于基本列宽和匹配该模块化的元素以及 .masonry-brick 宽度的最小公约数。
在您的情况下，固定宽度的#container 没有多大意义，因为 Masonry 的目的是在跨浏览器和设备调整浏览器窗口大小时启用灵活的布局。不过，您可以有一个居中的#container。
有关类似问题，另请参阅 https://stackoverflow.com/a/12525917/963514。
【讨论】：