2

我有一个完美运行的网格，除了我希望导航中的列相互对接。这是桌面上的 24 列魔法网格，每个导航项都是 4/24。如果我尝试负边距，它们不再跨越导航栏的整个宽度，它们滑到左边并留下一个洞（最后一项是欧米茄）。这可以通过列来完成，还是我只需要在没有导航栏的情况下完成？在此屏幕截图中，我将它们全部涂成灰色以使其明显：

在此处输入图像描述

4

2 回答 2

3

如果您不需要排水沟，则不需要 Susy 的帮助 - 数学很简单：

.nav-item {
  float: left;
  width: percentage(4/24);
}

就是这样，但正如您所注意到的，由于亚像素舍入，某些浏览器中会留下额外的空间。亚像素舍入没有简单的解决方案，除了学习围绕它进行设计。Susy 将最后一列向右浮动，因为在内部隐藏空间比在边缘更容易。

你的另一个选择有点老套，让你更接近（但不是全部）。通过将所有列向左拉齐，您可以将它们推回原位，而不会让舍入误差累加。这样你就永远不会有超过 1px 的差距：

.nav-item {
  float: left;
  width: percentage(4/24);

  // pull things flush left
  margin-right: -100%;

  // push things back into place
  @for $i from 1 through 6 {
    &:nth-child(#{$i}) { margin-left: percentage(($i - 1)*4/24); }
  }
}

当然，如果您支持旧版浏览器，您可以使用类来代替 :nth-child。如果你正在做任何类型的响应式设计，这是你能做的最好的。响应式设计无法完全避免亚像素舍入。我强烈建议学习围绕它进行设计。

于 2012-10-20T20:34:33.410 回答
1

Eric Meyer 太棒了，他现在包含了一些可以帮助你解决这个问题的东西 Steve - 看看最新版本的 Susy 中的流血。

我相信这会帮助你解决你的问题。它允许您执行以下操作：

.nav-item {
  ...
  @include bleed(1 of 4);
}

彻底阅读更新以使用隔离和流血

希望有帮助！感谢 Eric 在 Susy 上做得如此出色:)

于 2013-03-21T15:19:37.370 回答