0

我现在试图让我的玩具项目做出响应，但我遇到了一个问题，我不确定是否有可能解决以及该修复是否有意义。目前我的 Scss 代码如下所示（使用 Susy 和断点）：

.moodlegrid{
    @include with-grid-settings($gutter: 0.85%){
        li{
            @include trailer(0.5);
            @include isolate-grid(6,18);
            @include breakpoint($william){
                &:nth-child(3n + 1) { clear: none; }
                @include isolate-grid(9,18);
            }
            @include breakpoint($jack){
                &:nth-child(2n + 1) { clear: none; }
                @include isolate-grid(18,18);
            }
        }
    }
}

在桌面屏幕尺寸上，我得到一个 3x3 图像网格：

偶数个列表项

在一个中型屏幕上，我选择了一个 2 列显示，这会导致底部最后一行的九个列表项中的一个：

列表项的数量奇数

那么将最后一行的不均匀项目居中是否有意义（此时最后一个项目正在填充并粘在左列）？使用 Susy 和/或纯 CSS 很容易做到这一点吗？任何建议和灵感都将不胜感激，因为在这种情况下，我有点迷茫并且不知道如何对待那件事。:s 最好的问候拉尔夫

4

1 回答 1

1

您需要做的就是重新定位任何:last-child也:nth-child(odd)- 从左侧移动它，将其推到剩余距离的一半：

@include breakpoint($william){
  &:nth-child(3n + 1) { clear: none; }
  @include isolate-grid(9,18);
  &:nth-child(odd):last-child { margin-left: space(9,18) / 2; }
}

space(9,18)是剩余空间 - 9 列加上一个额外的装订线，共 18 列。如果剩余的列数为偶数，它会更简单。假设余数是 8：

$position: $remainder / 2;
&:nth-child(odd):last-child { @include isolate($position,18); }
于 2013-05-07T17:12:19.290 回答