4

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

我无法让水平布局工作。在 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 文档说水平布局需要设置高度。但是文档提供的 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>' 的宽度，这会产生一些可见的，虽然丑陋的内容。但是如何<div>在 Javascript 中设置 ' 宽度？似乎 packery 覆盖了我设置的宽度，无论我是在调用packery().

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

4

1 回答 1

1

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

于 2015-10-29T22:33:14.837 回答