苏西画廊中心最后一排答案

【问题标题】：Susy Gallery Center Last Row苏西画廊中心最后一排
【发布时间】：2015-10-19 21:23:47
【问题描述】：

使用 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>

【问题讨论】：

标签： susy

【解决方案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;
  }
}

【讨论】：

好的，在看到你的建议后，我很简单...... @include span(3 of 12); margin-left: gutter(3);
margin-left: gutter(3) 基本上是给你一个任意数字。您要求 Susy 给您一个排水沟宽度，就好像您在 3 的上下文中一样，而您不是。你真的想把它推到半列（在12 的上下文中）。它可能会起作用，但在这种情况下，Susy 会让您的代码不太清晰。
感谢您的解释！

【解决方案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() -> get-isolation() -> get-span-width() susy 本身的函数后，我能够找到它 here。

编辑：

我还发现了 article 和 codepen，它们也可以提供帮助。

【讨论】：