Susy Gallery Center 最后一排

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 mixin 可以为你做这件事，但你可以使用 susy 函数（span 和 gutter）来保持与网格对齐：

.logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.partner {
  width: span(3 of 12);
  margin-right: gutter(12);

  &:nth-child(4n),
  &:last-child {
    margin-right: 0;
  }
}

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;
        }
    }
}

我在弄清楚如何重新计算给定的偏移量时遇到了一些麻烦，在深入研究了 susy 本身的 gallery() -> get-isolation() -> get-span-width() 函数后，我能够找到它 here.

编辑：

我也找到了这个 article and codepen 也有帮助。

Susy Gallery Center 最后一排

Susy Gallery Center Last Row

susy