css - Susy 列布局重新排序

Question

我有以下内容，我将链接到样式并使用 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 列内使用 div 和 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。

Answer 1

@include span(2 at 1 isolate);

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

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