我知道这可能是不可能的,我查看了文档但找不到。
这是我的场景:
假设我有一个 12 列的网格,左侧是主要内容,右侧是次要内容。
我正在遵循移动优先的方法,因此默认样式(移动)使左右列均为 100%。主要内容是第一和次要在底部。
然后对于平板电脑/台式机,我将主要内容设为 8 列(左对齐)和次要 4 列(右对齐)。但是,我需要辅助内容列始终至少为 300 像素(因为有广告)。
有没有办法可以用 Susy 做到这一点?
我知道这可能是不可能的,我查看了文档但找不到。
这是我的场景:
假设我有一个 12 列的网格,左侧是主要内容,右侧是次要内容。
我正在遵循移动优先的方法,因此默认样式(移动)使左右列均为 100%。主要内容是第一和次要在底部。
然后对于平板电脑/台式机,我将主要内容设为 8 列(左对齐)和次要 4 列(右对齐)。但是,我需要辅助内容列始终至少为 300 像素(因为有广告)。
有没有办法可以用 Susy 做到这一点?
当然。最简单的方法是确保在有足够的空间容纳 4/12 列大于 300px 之前不会发生断点。如果做不到这一点,你就必须发挥创造力。
在 CSS 中做到这一点的唯一可能方法是让受控元素(次要)在标记中排在第一位。由于文档流的处理方式,不可能让后面的元素影响前面的元素——您需要打开样式secondary
来控制main
移动方式。
第一件事是secondary
按照你想要的方式移动。您还需要在此处手动设置装订线:
.secondary {
@include span-columns(4 omega);
min-width: 300px;
margin-left: gutter();
}
然后你需要给出main
一个布局上下文,这样它就不会环绕浮动secondary
。最简单的方法(有一些副作用)是使用overflow: hidden
.
.main {
overflow: hidden;
}
而已。如果你不能使用overflow: hidden
,还有其他方法可能对你有用。OOCSS lastUnit服务于这个目的,但使用了更多的代码。
或者您可以改用 flexbox,但支持不是很好。
基本上:Susy 不是问题——有办法做到这一点,但无论你使用什么系统,这都需要一些工作。我仍然建议使用更高的断点(或中间断点)。