Susy 列布局重新排序答案

【问题标题】：Susy column layout reorderingSusy 列布局重新排序
【发布时间】：2014-09-19 08:18:59
【问题描述】：

我有以下内容，我将链接到样式并使用 Susy 重新排序。

来源顺序如下，不可更改。

<div class="item a">A</div>
<div class="item b">B</div>
<div class="item c">C</div>
<div class="item d">D</div>

需要的布局是：

   -------------------------------
   |   A   |      B      |   C   |
   |-------|             |       |
   |   D   |             |       |
    ------------------------------

或：

   -------------------------------
   |   A   |      B      |   C   |
   |-------|             |       |
   |   D   |             |       |
   |       |             ---------
   |       |             |
   ---------             |
           |             |
           ---------------

或：

   -------------------------------
   |   A   |      B      |   C   |
   |       |             |       |
   |       |-------------|       |
   |       |             ---------
   ---------
   |   D   |
   ---------

等等。

基本上 D 列应该遵循 A 列的流程。我怎样才能用 Susy 做到这一点？

我想出了以下prototype，它仅适用于列中的文本。

$susy: (
  columns: 4,
);

.item {
  background: lightgray;
  outline: 1px solid;
}

.a {
  @include span(1);
}

.b {
  @include span(2 at 1 isolate); /* Why do I place this at 1 and not at 2? */
}

.c {
  @include span(last 1);
}

.d {
  width: span(1);
}

当我想在 D 列中使用 divs 和 clear: both 时，这种方法会失效，如下例所示。

<div class="item a">A</div>
<div class="item b">B</div>
<div class="item c">C</div>
<div class="item d">
    <div style="clear: both">Title</div>
    Other text
</div>

在这种情况下，D 列正确放置在布局的左侧，但位于 A、B 和 C 下方。

【问题讨论】：

标签： css sass grid-layout susy-compass

【解决方案1】：

@include span(2 at 1 isolate);

这意味着在width of 1 span 之后加上b 和width of 2 span。跨度宽度根据$susy 处的columns 参数计算（在您的情况下为total_width/4）

如果您的 a、c、d 的宽度为 1 个单位，而 b 的宽度为 2，这是完全正确的。

【讨论】：

从上面的布局可以看出，B 跨越 2 列。
根据文档：为了隔离，您可以使用任意宽度或列索引（从 1 开始）。 “at 1”是指“在位置 1”，而不是“在 1 个跨度的宽度之后”，或者？
我确实读过它，但可能我没看懂，你能指出哪里说@include span(2 at 1 isolate); 意味着put after width of 1 span？

【解决方案2】：

以下是我能找到的解决方案。我基本上在 B 和 C 周围使用了一个包装器来将它们都推到右边。

<div class="item a">A</div>
<div class="wrapper">
    <div class="item b">B</div>
    <div class="item c">C</div>
</div>
<div class="item d">
    <div style="clear: both">Title</div>
    Other text
</div>

这使右侧的两列对齐。

$susy: (
  columns: 4,
);

.item {
  background: lightgray;
  outline: 1px solid;
}

.wrapper {
  @include span(last 3);
}

.a {
  @include span(1);
}

.b {
  @include span(2 of 3);
}

.c {
  @include span(last 1 of 3);
}

.d {
  @include span(1);
  clear: left;
}

【讨论】：