0

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

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

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

在这种特定情况下：

  1. 右侧的视频必须与正在运行的文本的右边缘对齐。
  2. 正在运行的文本必须在不清除视频的情况下继续不间断

我试过使用 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();
  }
}
4

1 回答 1

0

这个问题不太对。您遇到的问题与location论点有关，而不是流向。我会尽力回答这两个问题。

当您使用非对称网格时，您必须非常清楚location( at) 参数在任何时候跨越列（两者span和post此处）。目前，您的视频被设置为第 2-3 列的宽度，其后边距为第 1 列的宽度。

尝试这个：

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

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

rtl您还可以通过添加或更改速记中的流向ltr——尽管我不确定在这种情况下它是否会对您有所帮助，因为它会颠覆您对网格的整个理解。我们可以轻松地添加right和left浮动覆盖参数，并且可能应该这样做。随意在 github 上提交问题。

于 2014-04-13T19:29:51.290 回答