包装水平布局问题

Packery Horizontal Layout Problems

本文关键字：问题 布局 水平 包装      更新时间：2023-09-26

希望有人有一些packery的经验，我正在为一个项目使用。

我无法使水平布局工作。在HTML中声明包对象似乎是可行的。

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

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

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

这导致<div>元素的包装对象被分配为0px高和4px宽。(4px的宽度可能来自于一些项目的1px边框。)包装文件上说水平布局需要设置高度。但是文档中提供的CSS似乎什么都做不了，不管package是用HTML还是Javascript初始化的:

/* 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重写了我设置的宽度，无论我是在调用packery()之前还是之后这样做。

packery中的所有内容似乎都适合垂直布局。但我确实想使用水平布局但显然我做错了什么。有人能帮忙吗?

我在使用ishhorizontal选项时遇到了类似的问题。我解决它使用!important标签在我的css在div的宽度周围的包。

相关文章：