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列布局重新排序

回答

相關問題