苏西:逆流方向中线

Question

我正在用Susy2.0.0构建一个不对称的网格布局，其中网格项有时需要向左或向右浮动，以允许运行的文本不间断地继续。

例如，我可能想要将视频对齐到正在运行的文本中段落的左、右或中间。你知道，就像浮车一般的行为。除了这里，我的项目的约束迫使我将每个段落作为行中唯一的项目，如果没有其他项目作为旁边显示。

https://dl.dropboxusercontent.com/s/vbuflsjun1p4shm/Screenshot%202014-04-12%2017.31.06.png

在这一具体情况下：

1. 右边的视频必须排在正在运行的文本的右边边缘。
2. 正在运行的文本必须不间断地继续运行，而不清除视频。

我尝试过使用“最后的流”设置，但这似乎没有多大帮助。事实上，当我将它与@include post(1)一起使用时，生成的post边距甚至不等于最后一列的宽度--它看起来更像最左边的列的宽度。

如果有什么事情需要澄清的话，请告诉我，或者它是否会帮助我把它扔到Codepen或者其他类似的地方。

HTML

<div class="sup">
  <figure class="sup-content">
    <div class="video"></div>
    <figcaption class="sup-content-caption"></figcaption>
  </figure>
  <div class="sup-grafs">
    <p>A secure is an unstriped bomber. What we don’t know for sure is whether or not the snowless credit comes from a meagre size.</p>
    <p>What we don’t know for sure is whether or not a tuna is a liver’s mexico. A lotion can hardly be considered a tearless rest without also being a save.</p>
    <p>A kookie expansion’s chill comes with it the thought that the podgy chair is a japan. Few can name an unsafe editorial that isn’t a sodden bra. Few can name a tinny bee that isn’t a luckless rhinoceros.</p>
  </div>
</div>

SCSS

$susy-grid-sup: (1 2 1 3 3 1 3 2);

$susy: (
  columns: $susy-grid-sup,
  gutters: 1/4,
  math: fluid,
  output: float,
  gutter-position: inside,
  last-flow: to,
  debug: (
    image: show,
  ),
);

p {
  @include pre(3);
  @include span(2 at 4);
  @include break();
}

.sup--right {

  .sup-grafs {
    p {
      @include nobreak();
    }
  }

  .sup-content {
    @include span(2 at 2 last);
    @include post(1);
    @include break();
  }
}

Answer 1

这个问题不太正确。您所遇到的问题与location参数有关，而不是流方向。我会试着回答这两个问题。

当您使用非对称网格时，您必须非常清楚location (at)参数在任何时候跨越列时( span和post在这里)。当前，您的视频被设置为第2-3列的宽度，并带有一个边距--之后是第1列的宽度。

试试这个：

.sup-content {
  @include span(2 at 6 last);
  @include post(last 1);
  @include break();
}

如果没有给出显式列索引，Susy将使用last来确定位置。

您还可以通过添加rtl或ltr来改变速记中的流方向--但在本例中我不确定它会对您的网格有帮助，因为它翻转了您对网格的全部理解。我们可以轻松地添加right和left浮点覆盖参数，而且可能应该这样做。请随意提交一个github问题。