gpt4 book ai didi

javascript - 无法使用 Masonry 布局达到预期效果

转载 作者:行者123 更新时间:2023-11-28 05:36:00 24 4
gpt4 key购买 nike

我真的被难住了。由于这是一个布局问题,您需要查看我的 codepen example .

基本上,如果您在第二行看到,两个 block 之间有一个巨大的空间。为什么?为什么不排队?

这是 masonry 的选项:

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

此外,调整第三个网格项的宽度。理想情况下,我希望它是 50%,并且我所有的 div 都将紧密地放在空间中。我有自定义宽度的原因是 40% 是它移动到下一行之前的最大宽度。为什么?它需要在同一行。 50% + 50% = 100% 所以还有空间。为什么你认为它坏了?

1) JQuery 插件 https://github.com/desandro/masonry

最佳答案

空间在那里是因为 columnWidth 是 20%,但第一个元素是 50%。 50% 的元素四舍五入为 60%。所以有 10% 的额外空间。

但是如果你改变 .grid-sizer { width: 10%; } 这将允许 50% 的元素按 50% 进行测量。

关于javascript - 无法使用 Masonry 布局达到预期效果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38214302/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com