Susy列布局重新排序

我有以下内容，我会链接到样式，并与Susy重新排序。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，它只处理列中的文本。当我想用div s的clear: both内柱d，如以下情况

$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); 
}

这种做法打破了。

<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.

来源

2014-09-19 andrea.ge

@include span(2 at 1 isolate);

这意味着放b，width of 1 span后width of 2 span。跨度宽度根据在$susy（total_width/4你的情况）columns参数

如果您的A，C计算，d为1个单元的宽度和b有2个，这是完全正确的。

来源

2014-09-19 08:47:36

正如您从上面所示的布局中看到的，B跨越了2列。 – 2014-09-19 08:52:13

根据文档：对于隔离，您可以使用任意宽度或列索引（从1开始）。 “在1”意味着“在位置1”而不是“在1跨度的宽度之后”，或者？ – 2014-09-19 09:03:51

你读过隔离部分了吗？ – 2014-09-19 09:16:19

以下是我能找到的解决方案。我基本上使用了一个围绕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; 
}

来源

2014-09-21 06:49:31

Susy列布局重新排序

回答

相关问题