jquery masonry 60% 和 40% 列

Question

我正在尝试组合一个响应式 jquery 砌体布局 - 但允许第一个框为 60% 宽度（高度为 100%），其他两个框为 40% 宽度（高度为 50%） .

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

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

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>

jquery:

$('.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%}