Packery 水平布局问题

Question

希望有人对我正在用于项目的包装有一些经验。

我无法让水平布局工作。在 HTML 中声明 packery 对象似乎有点工作。

<div class="packery js-packery" data-packery-options='{ "isHorizontal": true }'>
...
</div>

虽然看起来宽度和高度并没有像文档建议的那样通过 CSS 更改。但是我没有费心去进一步挖掘，因为我需要使用 Javascript。等效的方法似乎根本不起作用：

$('.packery').packery({
    itemSelector: '.item',
    isHorizontal: true,
});

这导致包装对象的<div> 元素被分配为0px 高和4px 宽。 （4px 宽度可能来自某些项目的 1px 边框。）packery docs 表示水平布局需要设置高度。但是文档提供的 CSS 似乎什么也没做，无论 packery 是用 HTML 还是 Javascript 初始化的：

/* containers need height set when horizontal */
.packery.horizontal {
    height: 200px;
}

不过，我插入的所有物品均不可见，并且包装 <div> 为 4px x 0px。所以，我在 Javascript 中强制了容器的高度：

$('.packery').css('height', '400px');

这确实增加了元素的高度，但宽度仍为四。因此，所有元素基本上都是零宽度且不可见。所以，我尝试强制容器的宽度：

$('.packery').css('width', '1000px');

但是这个宽度似乎被忽略了。我可以在 Chrome 的开发者模式下使用元素编辑器强制 <div> 的宽度，这会产生一些可见的，虽然丑陋的内容。但是如何在 Javascript 中设置<div> 的宽度？似乎packery正在覆盖我设置的宽度，无论我是在调用packery()之前还是之后都这样做。

packery 中的一切似乎都适用于垂直布局。但我真的很想使用水平布局，但我显然做错了什么。有人可以帮忙吗？

Answer 1

我在使用 isHorizo​​ntal 选项时遇到了类似的问题。我在包装厂周围的div 宽度上使用我的css 中的!important 标签解决了它。