Question

使用Susy 2并尝试将最后一行置于susy画廊中心。有趣的是，我只需要显示奇数个徽标。总共15个。我尝试将最后3个放在一个单独的div中并弄乱它，但这似乎是我添加了更多不需要的代码。有任何想法吗？非常感谢提前！

这是我在这里找到的一个mixin，用于替换来自Susy 1的nth-omega函数：

@mixin nth-last($n, $type: child) {
&:nth-#{$type}(#{$n}) {
    @include last;
   }
}

我只是想先做一下span cols

.partner {
   @include span(3 of 12);
   @include nth-last(4);   
}

然后使用了画廊

.partner {
   @include gallery(3);

}

这是HTML

<div class="logos">
     <div class="partner"><img src="images/partners/envestnet.jpg"/></div>
     <div class="partner"><img src="images/partners/guggenheim.jpg"/></div>
     <div class="partner"><img src="images/partners/usbancorp.jpg"/></div>
     <div class="partner"><img src="images/partners/advent.jpg"/></div>
     <div class="partner"><img src="images/partners/charles-schwab.jpg"/></div>
     <div class="partner"><img src="images/partners/bloomberg.jpg"/></div>
     <div class="partner"><img src="images/partners/stifel.jpg"/></div>
     <div class="partner"><img src="images/partners/pershing.jpg"/></div>
     <div class="partner"><img src="images/partners/credit-suisse.jpg"/></div>
     <div class="partner"><img src="images/partners/fidelity.jpg"/></div>
     <div class="partner"><img src="images/partners/sp.jpg"/></div>
     <div class="partner"><img src="images/partners/ultimus.jpg"/></div>
     <div class="partner"><img src="images/partners/hsg.jpg"/></div>
     <div class="partner"><img src="images/partners/deutsche-bank.jpg"/></div>
     <div class="partner"><img src="images/partners/interactive-brokers.jpg"/></div>
</div>

Answer 1

没有好的方法可以使用浮点数进行居中，因此您需要一起使用不同的技术 - 无论是在完整列表中，还是在最后三个上。我对此的偏好是使用flexbox，但这不包括一些旧的浏览器。另一个选择可能是使用内联块，但这带来了它自己的挑战。在任何一种情况下，都没有Susy mixins为你做，但你可以使用susy函数（O(n)和span）来保持你对齐网格：

gutter

Answer 2

今天偶然发现了答案，并且出于几个原因无法使用flexbox。我@gallery的解决方案似乎运作良好。我甚至可以重置以前创建的居中，如果您在媒体查询中调整图库大小，这似乎是必要的。

注意：我在以下示例中使用@breakpoint：

article {
    @include breakpoint($medium-up) {
        @include gallery(6 of 12);

        &:last-child:nth-last-child(2n + 1) {
            background-color: red;
            margin-left: auto;
            margin-right: auto;
            float: none;
        }
    }

    @include breakpoint($large-up) {
        @include gallery(4 of 12);

        &:last-child:nth-last-child(2n + 1) {
            background-color: green;
            margin-left: get-span-width(8 of 12 wide);
            margin-right: -100%;
            float: left;
        }
    }
}

我在弄清楚如何重新计算给定的偏移量并在挖掘gallery() - ＆gt;之后遇到了一些麻烦。 get-isolation() - ＆gt; get-span-width() susy本身的功能我能够找到它here。

修改

我也发现了这个article和codepen也可以提供帮助。

苏西画廊中心最后一排

2 个答案: