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 つの列すべてにまたがって、わずかに異なる幅の新しいグリッドを含め、ミックスインを使用しcontainerて適用する必要があります。

そのため、内部には、それぞれ 1 列にまたがるように設定された 'sfooterがいくつかありますが、左余白は実質的に 2 倍になります。ul

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-settings。

実際に行っていることは次のとおりです。

まず、何の+span-columns(5 omega, 5)役にも立ちません。項目を右にフロートさせ、100% の幅を適用しました。ただし、ブロック要素はデフォルトで完全なコンテキストにまたがるため、実際の変更はなく、コードが追加されるだけです。これから必要になる可能性のある効果の 1 つは、フロートをクリアすることですがclearfix、代わりにそれを使用する必要があります。

次に、同じ要素でcontainer、 newmax-widthと auto マージンを設定するだけです。つまり、実際には、すべてのコンテナーは - この場合は必要ありません。新しいネストされたグリッドには、新しいコンテナーは必要ありません。必要なのは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 に答える