css - 整洁:在保持网格结构的同时动态增加列宽

Question

我正在为我的网格系统使用 Bourbon 的 Neat 库。

我有这样的代码:

section {
  @include outer-container;
  aside { @include span-columns(3); }
  article { @include span-columns(9); }
}

我想在悬停时增加 aside 标签的宽度，比方说，增加 50 像素。但是，这将导致 article 被推到下一行。

有没有办法缩放一列的宽度并按比例调整另一列的大小？

我知道这可以用 javascript 来完成，但我想知道是否有办法用 Neat grid-system 来做到这一点。

谢谢!

---

编辑

这是对我有用的解决方案:

section {
  @include outer-container;
  aside { 
    @include span-columns(3);

    &:hover {
      @include span-columns(2);

      & + article {
        @include span-columns(11);
      }
    }
  }
  article { @include span-columns(9); }
}

当鼠标悬停在 aside 上时，我正在使用 css 兄弟选择器 + 选择 article 元素。

Answer 1

这没有内置功能，但您是否尝试过在 :hover 上覆盖 width？也就是说，将 x 长度添加到 A 列的 width 并从 B 列中取出相同的长度 away CSS calc () 在这里可以提供帮助。

Neat 的文档深入了解了 span-columns 的确切功能及其输出:http://thoughtbot.github.io/neat-docs/latest/#span-columns

话虽如此，如果您的需求允许的话，这听起来像是 flexbox 的一个很好的用例。