包装水平布局问题

Question

希望那里的人有一些经验，我正在用于项目。

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

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

尽管文档显示宽度和高度似乎没有通过CSS更改。但我并没有因为需要使用Javascript而烦恼。而等效似乎并不起作用：

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

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

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

尽管如此，我插入的项目都不可见，而且<div>包装是4px x 0px。所以，我在Javascript中强制容器的高度：

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

这会增加元素的高度，但宽度保持为4。因此，所有元素基本上都是零宽度和不可见的。所以，我尝试强制容器的宽度：

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

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

包装中的所有内容似乎都适用于垂直布局。但我真的想要使用水平布局，但我显然做错了什么。有人可以帮忙吗？

Answer 1

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