使用Susy 2（候选发布版），我试图弄清楚如何使用固定宽度的侧边栏（左侧或右侧）创建简单的流体布局，我很乐意使用first和last关键字。谁能给我有关Susy 2中如何执行此操作的任何指示？
谢谢！
根据您自己的具体情况，有几种混合固定/流体布局的方法。
隔离边栏。
浮动隔离是保持浮动彼此独立的一种很酷的方法。
.side {
@include span(3 static isolate);
}
.main {
@include full;
padding-left: span(3 static wide);
}
// or...
.main {
margin-left: span(3 static wide);
}
span(3 static)将使用您的column-width设置/单位跨越3列。添加isolate将设置负的右边距，以防止其占用水平空间。添加wide，将在该宽度中包含一个额外的装订线。您也可以改用任意宽度200px。由你决定。
完全从流中删除边栏。
如果可以安全地从流中删除侧边栏，则有时将其绝对定位最简单，并在主要内容中添加相同的填充。使用Susy 2，可能看起来像这样：
.side {
position: absolute;
left: 0;
top: 0;
width: span(3 static);
}
.main {
padding-left: span(3 static wide);
}
使用布局上下文黑客。
还有一些方法可以创建一个新的布局上下文，该上下文将在浮动后填充剩余的空间。其中最简单的是overflow: hidden;
.side {
@include span(3 static);
}
.main {
overflow: hidden;
}
缺点是如果您出于任何原因需要溢出。还有其他技术，还有其他hackey缺点，例如：
.main {
display: table-cell;
vertical-align: top;
width: 10000px;
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句