Question

我正在尝试将响应式jquery砌体布局放在一起 - 但允许第一个盒子宽度为60％（高度为100％），另外两个盒子宽度为40％（高度为50％）

如果将列设置为50％，我可以使它工作，但我似乎无法使用第一个框为60％，另外两个为40％宽度。砌体将第二个盒子放在我的第一个盒子下面。

这是我正在使用的代码（适用于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>

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%}

jquery masonry 60％和40％的列

1 个答案: