gpt4 book ai didi

javascript - jquery 帮助布局

转载 作者:太空宇宙 更新时间:2023-11-04 16:25:34 25 4
gpt4 key购买 nike

您好,我有以下 HTML,

    <article id="jobwall">
<ul>
<li class="box">Hello World</li>
<li class="box">Hello World</li>
<li class="box">Hello World</li>
<li class="box noRMar">Hello World</li>
<li class="box">Hello World</li>
<li class="box">Hello World</li>
<li class="box">Hello World</li>
</ul>
</article>

和下面的 CSS,

#jobwall { 
width:100%;
float:left;
clear:both;
overflow:hidden;
margin:15px 0px 0px 0px;
}

#jobwall li {
width:221px;
float:left;
margin:0px 17px 20px 0px;
border:1px solid red;

}

#jobwall li.noRMar {
margin:0px 0px 20px 0px;
}

我正在尝试为 jquery 实现一个名为 Masonary 的插件,想法是我可以让 4 个 li 彼此相邻 float ,但是当我添加 masonary 时我只能 float 3 个,这是我的砌体设置,

$('#jobwall ul').masonry({

          singleMode: false,
// Disables measuring the width of each floated element.
// Set to true if floated elements have the same width.
// default: false

columnWidth: 241,
// Width in pixels of 1 column of your grid.
// default: outer width of the first floated element.

itemSelector: '.box:visible',
// Additional selector to specify which elements inside
// the wrapping element will be rearranged.
// Required for Infinite Scroll with window resizing.

resizeable: true,
// Binds a Masonry call to window resizes
// so layout appears fluid.
// default: true

animate: true,
// Animates layout rearrangements.
// default: false

saveOptions: true
// Masonry will use the options from previous Masonry
// calls by default, so you only have to enter in options once
// default: true

});

基本上,我将 masonary 实现为 li,最终显示将向下滑动的更多内容,我需要 li 继续按它们的顺序 float 。有没有更好的方法来实现这个,或者让 masonary 允许 4 li 排成一排

最佳答案

页面上的 4 * 221px(+边距)是否大于 100% 宽度?

关于javascript - jquery 帮助布局,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5620947/

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