sass - 你能有一个使用 Susy 的网格，它有 3 个流体和 1 个静态列吗？

Question

我是“Susy”的新手，正在努力找出一些项目。

我正在尝试创建一个包含 3 个流体促销框（在附加图像中均为灰色）和 1 个静态框（这是一个 300 像素 x 250 像素的大框广告 - JPG 文件）的行。我不想让黄色框（广告）比例，但我确实希望其他 3 个框是流动的，并在最后一个灰色框的右侧保持相等的边距。

目前，当我开始缩放页面时，黄色框（图像）下降到 3 个流体框下方。有没有办法让他们充当一排。

提前致谢

Answer 1

是的。您需要从两个包装器开始——一个是静态块，另一个是围绕所有三个流体块。设置一个静态宽度，并将其浮动到右侧。不要浮动灵活的，而是给它一个块格式化上下文。overflow: hidden如果这对您不起作用（由于某种原因您需要溢出），请尝试添加与静态侧边栏相同大小的右边距（或稍大）。现在，灵活的包装器可以充当其他元素的上下文。像这样的东西：

.ad {
  @include span(last 1 of 4 static);
}

.flex-container {
  @include post(1 of 4 static);

  .item {
    @include span(1 of 3);
  }
}

在 Sassmeister 上查看演示。