jquery 帮助布局

发布于 2024-10-31 16:53:41 字数 2161 浏览 3 评论 0原文

你好,我有以下 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;
        }

我正在尝试实现一个名为 Masonary 的 jquery 插件,其想法是我可以容纳 4 个彼此相邻浮动的 li,但是当我添加 masonary 时,我只能浮动 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

        });

基本上我将砌体实现为 li,最终显示将向下滑动的更多内容,并且我需要 li 继续按它们的顺序浮动。有吗更好的方法来实现这一点,或者让砖石允许 4 里连续

Hello I have following 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>

And the following 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;
        }

I am trying to implement a plugin for jquery called Masonary, the Idea is that I can fit 4 li's floated next to each other, however when I add masonary I can only float 3, here is my masonary setup,

$('#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

        });

basically I implementing masonary as the li with eventually show further content which will slide down, and I need the li's to continue floating in the order they are. Is there a better way to implement this, or have masonary allow for 4 li to be in a row

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

策马西风 2024-11-07 16:53:42

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

Is 4 * 221px (+ margins) greater than 100% width on the page?

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文