jquery masonry 60% 和 40% 列

Question

我正在尝试组合一个响应式 jquery 砌体布局 - 但允许第一个框的宽度为 60%(高度为 100%)，另外两个框的宽度为 40%(高度为 50%) .

如果将列设置为 50%，我可以让它工作，但我似乎无法让它在第一个框为 60% 而另外两个为 40% 宽度的情况下工作。 Masonry 将后两个盒子放在我的第一个盒子下面。

这是我正在使用的代码(适用于 3 个框，宽度均为 50%)。我已经整理出我试图使用的 CSS，使其达到 60%/40%。

html:

<div class="grid">
        <div class="grid-sizer"></div>
        <div class="grid-item grid-item-width60 grid-item-height100">aa</div>
        <div class="grid-item grid-item-width40 grid-item-height50">bb</div>
        <div class="grid-item grid-item-width40 grid-item-height50">cc</div>
    </div>

j查询:

$('.grid').masonry({
        columnWidth:'.grid-sizer',
        itemSelector:'.grid-item',
        percentPosition:true
    });

CSS:

section.slideshow .grid{width:100%;height:100%;background:#000}
section.slideshow .grid-sizer,section.slideshow .grid-item{width:50%}

/*section.slideshow .grid-item-width60{width:60%}
section.slideshow .grid-item-width40{width:40%}*/

section.slideshow .grid-item-height100{height:100%;background:#f0f}
section.slideshow .grid-item-height50{height:50%;background:#f99}

任何帮助将不胜感激!我已经尝试按照这里所说的与响应式布局有关的内容进行操作:https://masonry.desandro.com/layout.html

Answer 1

好的，对于遇到此问题的其他人，它已按以下方式排序:

section.slideshow .grid-sizer,section.slideshow .grid-item{width:20%}