2

我正在尝试创建一个简单的图像拼贴,并且由于这个问题需要使用 Masonry:div grid of squares, float:left issue (image included)

我认为这很简单,但我无法弄清楚我的实现有什么问题:http: //classicopia.ivointeractive.com/。路径尽头的房子图片应该在右上角。间距是完美的 (970=2*291+388) 并且图像通过它的 float:left 属性获得位置,但砌体脚本将其拉出位置。

如果我增加整个容器的宽度,这两个图像会保持堆叠,但会向右移动。这是否意味着砌体无论如何只能创建 2 列?我将如何更改此号码?

4

1 回答 1

1

砌体需要等宽的柱子才能正常工作。.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

于 2012-09-23T08:29:18.373 回答