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.
答
@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个,这是完全正确的。
答
以下是我能找到的解决方案。我基本上使用了一个围绕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;
}
正如您从上面所示的布局中看到的,B跨越了2列。 – 2014-09-19 08:52:13
根据文档:对于隔离,您可以使用任意宽度或列索引(从1开始)。 “在1”意味着“在位置1”而不是“在1跨度的宽度之后”,或者? – 2014-09-19 09:03:51
你读过隔离部分了吗? – 2014-09-19 09:16:19