0

我有一个带有 susy 的主网格设置，然后在footer元素中我使用 Susy 的with-grid-settings()mixin 生成一个稍微不同的网格，如下所示：

footer
  +span-columns(5 omega, 5)
  +with-grid-settings(5, 174px ,20px ,0)
    +container
    @if $dev-mode-footer == true
      +susy-grid-background
    height: 240px

所以footer应该跨越所有 5 个主要列，并包含一个宽度略有不同的新网格，并使用containermixin 来应用它。

所以，然后在里面footer我有一些ul设置为每个跨越 1 列的 's，但剩下的边距实际上翻了一番。

这是CSS：

footer
  .banner
    +span-columns(5 omega, 5)
    height: 187
    border-top: 3px solid $highlight-1
    border-bottom: 3px solid $highlight-1
    padding: 10px 0

    ul
      +pie-clearfix

    li
      +span-columns(1, 5)
      border-right: 1px dotted $highlight-2
      padding-left: 35px

和结果图片：

Susy 和错误的宽度

似乎它与错误的网格上下文对齐。这与两个网格具有相同数量的列或其他东西有关吗？

4

1 回答 1

1

事情不是这样运作的，抱歉。这确实是一个概念问题。Susy 帮你设计成一个网格，但网格本身并不存在于任何地方。除了适当的最大宽度外，应用container不会建立任何东西。该容器对其内部的网格一无所知。with-grid-settings同样无法影响自身之外的任何事物。新网格上的任何项目都必须在with-grid-settingsmixin 中传递。

这是您实际在做的事情：

首先，+span-columns(5 omega, 5)没有做任何有用的事情。您刚刚将一个项目浮动到右侧，并应用了 100% 的宽度。但是块元素默认跨越它们的完整上下文，所以没有真正的变化——只是额外的代码。您可能想要的一个效果是清除浮动，但您应该使用clearfix它来代替。

然后，在同一个元素上，container只需设置一个新max-width的和自动边距。也就是说，实际上，所有容器都是 - 在这种情况下您不需要它。新的嵌套网格不需要新的容器。你只需要with-grid-settings.

这是我对你真正想要的猜测：

footer
  +clearfix
  +with-grid-settings(5, 174px ,20px ,0)
    @if $dev-mode-footer == true
      +susy-grid-background
    height: 240px
    .banner
      +clearfix
      height: 187
      border-top: 3px solid $highlight-1
      border-bottom: 3px solid $highlight-1
      padding: 10px 0

      ul
        +pie-clearfix

      li
        +span-columns(1, 5)
        border-right: 1px dotted $highlight-2
        padding-left: 35px

您可能还需要nth-omega(5n)在 li 上使用。

于 2013-01-08T18:14:22.630 回答