2

是否可以从容器中提取元素，同时保持它们与主网格对齐？

在下图中，我展示了我想要实现的目标。假设我的所有文本，包括第一列中较小的细节，都在一个跨越第 2 列和第 3 列的容器上。然后，我希望较小的文本从该容器向左拉一列，有效地移动到第 1 列，同时与主要副本保持一致。

红色框是主网格，蓝色是内部容器元素。

奇点有可能吗？

推/拉网格元素

4

2 回答 2

3

奇点完全可以做到这一点！

要将元素从其容器中拉出，只需使用负边距。但是正确的宽度和边距大小需要一些棘手的数学运算：

<div id=container>
  <div id=a>a</div>
  <div id=b>b</div>
  <div id=c>c</div>
</div>

$grids: 1 2 2
$gutters: .25


#container
  +grid-span(2,2)

#b
  $coefficient: (1 + 2 + 2) / (2 + 2)
  $width: column-span(1, 1) * $coefficient
  $gutter: gutter-span() * $coefficient

  width: $width
  margin-left: 0 - $width - $gutter

  float: left
  clear: both

+layout(2 2)
  #a, #c
    +grid-span(2, 1)

结果：

在此处输入图像描述

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

请注意，拉出的列的宽度和位置与网格不完全匹配。这可能是由于浏览器中的舍入错误，或者我的数学可能是错误的。

于 2013-10-12T19:07:43.970 回答
1

不是现在的形式，虽然现在你可能会发现这很有用：https ://github.com/Team-Sass/toolkit#nested-context

于 2013-10-12T15:57:08.253 回答