Bourbon Neat - 全宽外容器，没有排水沟

Question

您好

我正在玩https://pypi.python.org/pypi/ebcdic，我试图在配置的网格($max-width: em(1160)之外做三个覆盖100％窗口宽度的列，并且没有任何装订线。类似于下图（蓝色，黄色和绿色框）。

Bourbon Neat

因此，为了制作该部分的整个宽度，我没有指定任何外部容器＆＃39;为了清除排水沟，我添加了混合物＆＃39; omega＆＃39;但看起来像这样：

我快速修复我认为自己正在为这三篇文章添加width: calc(100% / 3)，但我认为这不是最佳解决方案......

有什么想法吗？

我在这里留下代码：

谢谢！

Answer 1

我认为你的width: calc(100% / 3);只是正确的解决方案。我今天在工作中遇到了这种情况。 @ mike-harrison的解决方案是我首先尝试的，但正如我在那里提到的，span-columns mixin使:last-child小于其他人。关于Github的问题得到了解答，这是非常有意的，你的用例可以用简单的百分比来更好地服务。

所以这是我的解决方案：http://codepen.io/alexbea/pen/BzozXw;

关键规则是：

section.HomeProducts
  +row

  article
    float: left
    // width: percentage(1 / 3)
    width: calc(100% / 3)

我使用了calc()的解决方案，虽然我也使用width: percentage(1 / 3)的注释方法。我认为大多数现代浏览器都支持calc()，但另一个浏览器会更好地为旧浏览器提供服务。浮动应该处理任何浏览器变化，也是Neat在span-columns mixin中使用的。

我还在父母身上加入了row() mixin来清除整个部分，并确保浮动不会使它们消失。

Answer 2

我这样做的方法是拥有100％outer-container，然后在内部元素上使用block-collapse。我在这里做了一个快速的笔：

http://codepen.io/mikehdesign/pen/ZObEdw

HTML与您的相同，这是我的SCSS：

section.HomeProducts {
  @include outer-container(100%);

  article {
    @include span-columns(4, block-collapse);
    height: 200px;
    background: green;

    &:first-child {
      background: blue;
    }

    &:nth-child(2) {
      background: yellow;
    }

    &:nth-child(3){
      background: green;
    }
  }
}