0

我从singularitygs（和网格系统）开始，当然我遇到了问题。这里是。

我有这个 HTML 标记：

<div id="wrapper">
  <div id="main">
    <div id="first-column">content</div>
    <div id="second-column">content2</div>
  </div>
</div>

我已经设置了这个不对称网格：

$grids      : 97px 263px 263px 97px;
$gutters    : 70px;

而这个scss：

#wrapper {
  @include background-grid;
  width: 930px;
  margin: 0 auto;
}
#main {
  //@include background-grid;
  @include grid-span(2, 2); //this element is spanned acros two columns in the middle
}
#first-column {
  @include grid-span(1, 1); //should be spanned acros first column in #main
}
#second-column {
  @include grid-span(1, 2); //this element should be spanned acros second column in #main
}

问题是如何让内部 div 意识到 #main 应该只有两列（和一个排水沟）这一事实。相反，看起来#main 继承了默认的网格设置。

我尝试了很多选项，例如通过 @include 布局更改#main 网格。或者通过添加告诉列适应正确的上下文@include grid-span(1, 1, 2);（第三个数字应该告诉 div 它在默认网格上下文中。但无济于事。我怀疑问题出在我对默认网格的 px 定义中。因为内部 div 得到很多时间只有 1.356% 宽，这看起来有点可疑。我是对的吗？我该怎么办？

感谢您的任何建议。

编辑：我尝试添加确切的 px 尺寸，并结合添加嵌套上下文，它看起来像它应该的那样，但我认为这不是它应该如何工作的？

#block-formblock-contact-form {
  @include  grid-span(1, 2, 2);
  width: 263px;
}

#block-system-main {
  @include  grid-span(1, 1, 2);
  width: 263px;
}
4

1 回答 1

1

您遇到的问题是，虽然您已将网格更改为两列对称网格，但您并没有按比例更改排水沟。Singularity 看到您当前的设置方式是，您有一个 2 列网格，每列宽度为 1，排水沟宽度为 70。现在，有两种方法可以解决这个问题。首先是明确说明您的子网格与主网格的关系。如下所示：

#first-column {
  @include grid-span(1, 1, 263px 263px);
}
#second-column {
  @include grid-span(1, 2, 263px 263px);
}

或者，使用 @include 布局

@include layout(263px 263px) {
  #first-column {
    @include grid-span(1, 1);
  }
  #second-column {
    @include grid-span(1, 2);
  }
}

第二个选项是在使用子网格时为列与装订线设置正确的比率。奇点在处理小比率而不是大的“绝对”值时效果最好。

@include layout(2, (70px / 263px)) {
  #first-column {
    @include grid-span(1, 1);
  }
  #second-column {
    @include grid-span(1, 2);
  }
}

希望这可以帮助！

于 2013-06-18T15:39:53.463 回答