Question

我正在尝试创建站点地图的页脚导航，其中级别嵌套在彼此之间。我想使用砌体，因此填充和边距是一致的，并且不会根据嵌套项目而改变。如果我改变了砌体调用以仅选择第一个（）ul然后嵌套的li出现在一行上，那么它会将其相对样式添加到嵌套ul中。

任何想法？

 <div id="links">
            <ul >
                <li class="box"><a href="/Industries.aspx"  >Industries</a></li>
                <li class="box"><a href="/Services.aspx"  >Services</a></li>
                <li class="box"><a href="/Quality---Regulatory.aspx"  >Quality &amp; Regulatory</a></li>
                <li class="box"><a href="/About.aspx"  >About</a>
                    <ul >
                        <li class="box"><a href="/About/Our-Story.aspx"  >Our Story</a></li>
                        <li class="box"><a href="/About/Our-Mission.aspx"  >Our Mission</a></li>
                        <li class="box"><a href="/About/Our-Core-Values.aspx"  >Our Core Values</a></li>
                   </ul>
              </li>
              <li class="box"><a href="/News.aspx"  >News</a>
                   <ul >
                       <li class="box"><a href="/News/Events.aspx"  >Events</a></li>               
                   </ul>
              </li>
              <li class="box"><a href="/Careers.aspx"  >Careers</a></li>
              <li class="box"><a href="/Contact.aspx"  >Contact</a></li>
              <li class="box"><a href="/tests.aspx"  >tests</a></li></ul>
       </div>

 <script type="text/javascript">

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

        singleMode: true,

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

        columnWidth: 182,

        // 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: false,

        // 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
    });
</script>

Answer 1

我知道这是旧的，但砌体上的这个选项可能会帮助你。

containerStyle: { position: 'absolute' }

Use jQuery masonry with Absolutely Positioned Parent?

在ul上嵌套ul的jquery masonry

1 个答案: