html - Susy 中的间距宽度问题

Question

我有一个 24 Susy 列网格。我正在尝试做一些盒子，每个盒子都跨越 6 列(所以每行 4 列)，但我想在它们周围添加一些排水沟，使用一个 24 列宽的更宽的容器。不幸的是，无论我尝试什么，我都无法让它发挥作用。似乎柱子没有调整它们的宽度以适应排水沟......我认为 Susy 应该这样做，不是吗？我是这一切的新手，所以我阅读了很多文章和帖子，但无法找到这个答案，所以非常感谢您提供的任何帮助。

代码如下:

.solutionThumbnails {
  @include span(24 no-gutters);
  @include container;
  @include clearfix; 
  li {
    @include span(6);
    @include gutters(8px after);
    background: #666;
    float: left;
    height: 240px;
    display: block;
    &:nth-child(4) {
      margin-right: 0px;
    }
  }
}

这是它现在的样子，忽略格式，否则仍在编码 :)(您会看到它把第四项敲下来): http://i.stack.imgur.com/5tmWp.jpg

Answer 1

因为 Sass 不知道 DOM，所以 Susy 不知道您的 span 和 gutter mixins 被应用到同一个元素，或者在反正。当 Susy 拥有所有信息时，它将处理数学。我想你想要 something like this ？

.solutionThumbnails {
  @include container(24);

  li {
    @include gallery(6 of 24 split);
    background: #666;
    height: 240px;
  }
}

我不知道您的设置，也不知道您需要的输出的许多细节，但这应该让您接近。您不需要在同一个元素上设置 span、容器和 clearfix——container mixin 会处理所有这些。类似地，gallery 处理您需要的所有内容，以实现相同大小元素的一致布局。

我的例子并没有给你准确的 8px 间距。将静态 (px) 间距与流体 (%) 网格混合的唯一方法是在元素内部移动间距。您可以通过根据需要更 retrofit 订线比率来使用流体值近似 8px 装订线。默认比率为 .25。