2

给定以下 HTML 结构：

<div id="a">
  A
  <div id="b">
    B
  </div>
</div>

...以及以下奇点 SCSS：

$grids: 6;
$gutters: .1;
$gutter-styles: 'split';

div#a {
  @include grid-span(5,2)
}

div#b {
  // @todo: position and width.
}

...我想创建一个这样的布局，其中 B 从其容器 A 中向左拉出 1 列，并跨越最左侧的 2 列：

  -----------
  |  A      |
-----       |
| B |       |
-----       |
  |         |
  -----------

当然我可以自己做数学，但我觉得这应该可以使用 Singularity mixins 和函数（毕竟，这就是我使用网格框架的原因:-)）但是，我无法获得尺寸和定位B 正确。

我使用哪些 Singularity mixins 和/或函数来设置的宽度（列跨度）和位置（负边距左）div#b？

4

2 回答 2

1

像这样的东西似乎是你正在寻找的东西：http ://sassmeister.com/gist/6663743

于 2013-09-22T21:02:04.710 回答
1

答案很大程度上取决于您想要在#A 块内的流程。

保持流量

最简单的做法是以负边距将#B 块拉到外面。

为此，您不应该使用grid-span()mixin。而是使用width和marginCSS 属性。可以使用column-span()和gutter-span()辅助函数计算这些属性的值。

这些辅助函数接受$grid代表网格上下文的参数。您应该提供#A 块的网格上下文，它比主网格少一列。

$grids: 6
$gutters: .1
$gutter-styles: 'split'

$a-columns-width: 5

#a
  +grid-span($a-columns-width,2)
  overflow: visible

#b
  width: column-span(2, 1, $grid: $a-columns-width)
  margin-left: - column-span(1, 1, $grid: $a-columns-width) - gutter-span($grid: $a-columns-width)

请看演示：http ://sassbin.com/gist/6676220/

从流程中移除#B

但是#B 块没有从流中取出。它仍然占据#A 块的整个宽度，所以你不能在#B 的右边放任何东西。

如果您需要在#B 的右侧放置一些文本和内容，您应该考虑使用另一种方法。绝对定位是我想到的。

解决方案会更复杂。如果你想让我想出一个，请更详细地解释你的任务。提供一个图形模板，也许。

您还必须使用一些技巧来防止#A 的内容被#B 覆盖。

扁平化的 HTML 结构让事情变得简单

另外，为什么首先需要嵌套结构（#A 中的#B）？如果你把结构弄平，定位块就变得很简单了：

#a
  +grid-span(5,2)

#b
  +grid-span(2,1)
  margin-top: 4em

演示：http ://sassbin.com/gist/6676193/

#A 的内容出现在#B 下仍然是一个问题。

PS如果您对答案不满意，请更详细地解释任务并提供所需页面的图形说明以及所有#A 的内容。

于 2013-09-23T20:13:36.280 回答