0

我知道这可能是不可能的,我查看了文档但找不到。

这是我的场景:

假设我有一个 12 列的网格,左侧是主要内容,右侧是次要内容。

我正在遵循移动优先的方法,因此默认样式(移动)使左右列均为 100%。主要内容是第一和次要在底部。

然后对于平板电脑/台式机,我将主要内容设为 8 列(左对齐)和次要 4 列(右对齐)。但是,我需要辅助内容列始终至少为 300 像素(因为有广告)。

有没有办法可以用 Susy 做到这一点?

4

1 回答 1

1

当然。最简单的方法是确保在有足够的空间容纳 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 不是问题——有办法做到这一点,但无论你使用什么系统,这都需要一些工作。我仍然建议使用更高的断点(或中间断点)。

于 2013-10-03T06:07:41.003 回答