2

我终于找到了一些时间来测试 Singularity，我又回到了我之前遇到的一个问题，因为我找不到一个明显的解决方案。

我的问题是嵌套网格。假设我有一个简单的 12 列网格

$grids: add-grid(12 at $break2);

我的布局使用了一个主要内容区域，该区域扩展到这 12 列中的 9 列：

@include breakpoint($break2) {
    @include grid-span(9, 3);
    border: 1px solid red;
}

在该内容区域内，我需要创建一个分为三列的部分，这意味着里面的每篇文章将跨越父容器的 3 列（即 9 列中的 9 列）。

我已经用下面的代码试过了，但不能让它工作。

.highlights{
    overflow: hidden;
    border: 1px solid black;

    article{

        @include float-span(3);

        &:nth-child(3n){
            @include float-span(1, 'last');
        }
    }
}

我的目标是有一个简单的声明，我可以为每篇文章都有一个通用的文章声明，为每一行中的最后一篇文章传递一个规则，就像我在上面所做的那样。

也许我的困惑是因为我已经习惯了我使用的当前网格系统，你能帮忙吗？嵌套网格以使其与父元素对齐的最佳和最实用的方法是什么？

4

1 回答 1

3

因此，您遇到的问题是您尚未更改网格上下文，并且此时仍在使用您的全局 12 列网格上下文。您需要将网格上下文更改为 9，因为您现在位于 9 列网格内。以下应该可以解决您的问题：

.highlights{
  overflow: hidden;
  border: 1px solid black;

  article{
    @include layout(9) {
      @include float-span(3);

      &:nth-child(3n){
        @include float-span(1, 'last');
      }
    }
  }
}
于 2013-05-04T20:58:43.830 回答