Question

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

例如，我可能希望将视频与正在运行的文本中的段落的左侧，右侧或中心对齐。你知道，就像花车通常表现一样。除了这里，我的项目的约束迫使我将每个段落作为行中的唯一项目，如果没有其他项目显示为旁白。

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

在这个具体案例中：

右侧的视频必须排列在正在运行的文本的右边缘旁边。
正在运行的文字必须继续不间断而不会清除视频

我尝试过使用Last Flow设置，但这似乎没什么用处。事实上，当我将其与@include post(1)一起使用时，生成的帖子边距甚至不等于最后一列的宽度 - 它看起来更像是最左边列的宽度。

如果有任何需要澄清的话，请告诉我，或者是否有助于我将其放入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浮点覆盖参数，并且可能应该。随意提交issue on github。

susy：逆流方向中排

HTML

SCSS

1 个答案: