0

我有一个 24 Susy 列网格。我正在尝试制作一些框，每个框将跨越 6 列（因此每行 4 列），但我想在它们周围添加一些排水沟，并使用 24 列宽的更宽容器。不幸的是，无论我尝试什么，我都无法让它工作。似乎柱子没有调整它们的宽度以适应排水沟......我认为苏西应该这样做，不是吗？我对这一切都很陌生，所以我已经阅读了很多文章和帖子，但无法弄清楚这个答案，所以非常感谢您提供的任何帮助。

这是代码：

.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

4

1 回答 1

0

Because Sass isn't aware of the DOM, Susy doesn't know that your span and gutter mixins are being applied to the same element, or are related in any way. Susy will handle the math when it has all the information. I think you want something like this?

.solutionThumbnails {
  @include container(24);

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

I don't know your settings, or many specifics about the output you need, but that should get you close. You don't need to set a span, container, and clearfix on the same element — the container mixin handles all of that. Similarly, gallery handles everything you need for a consistent layout of same-sized items.

My example doesn't get you exactly 8px gutters. The only way to mix static (px) gutters with fluid (%) grids, is to move the gutters inside the elements. You can approximate 8px gutters with a fluid value by changing the gutter ratio as needed. The default ratio is .25.

于 2015-06-19T20:12:04.110 回答