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。跨度宽度是根据columns $susy的{{1}}参数计算的（{1}}

如果a，c，d的宽度为1个单位且b为2，则完全正确。

Answer 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;
}

Susy列布局重新排序

2 个答案: