包装水平布局问题

Question

Hoping that someone out there has some experience with packery, which I'm using for a project.

I cannot get the horizontal layout to work. Declaring the packery object in HTML seems to work somewhat.

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

Although it appears that the width and height are not changed through CSS as the documents suggest. But I've not bothered digging further because I need to use Javascript. And the equivalent doesn't seem to work at all:

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

This results in the <div> element the packery object was assigned to 0px high and 4px wide. (The 4px width probably comes from some items' 1px border.) The packery docs say that horizontal layout requires setting height. But the CSS provided by the docs seems to do nothing, whether packery was initialized in HTML or Javascript:

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

Still, none of my inserted items are visible and the packery <div> is 4px x 0px. So, I forced the container's height in Javascript:

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

This does increase the element's height but the width remains at four. And therefore all the elements are essentially zero width and invisible. So, I tried forcing the container's width:

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

But this width seems to be ignored. I can force the <div> 's width using the element editor in Chrome's developer mode, and that produces some visible, although ugly, content. But how the hang do I set the <div> 's width in Javascript? It seems packery is overriding the width I set, whether I do it before or after the call to packery() .

Everything in packery seems to work great for vertical layouts. But I really want to use the horizontal layout but I'm obviously doing something wrong. Can anyone help?

Answer 1

I had similar issue with the isHorizontal option. I solved it using !important tag in my css on the div width around the packery.