0

スージーとの最初の問題のほとんどをなんとか解決できたと思います。私が理解できない唯一の奇妙なことは、画像マトリックスを作成するときのように動作する理由です。

これが私のセットアップです：

$total-columns: 24;
$column-width: 6%;
$gutter-width: 1%;
$grid-padding: 0;

$container-style: magic;

HTMLコードは次のとおりです。

    <section name="Projekte" class="projects" role="main">
        <hgroup>
            <h1 class="maintitle">Unsere Projekte</h1>
            <h2 class="subtitle">Subtitle</h2>
        </hgroup>
        <ul class="moodlegrid">
            <li><a href=""></a><img title="Projekte1" src="img/projekte.jpg"  /></li>
            <li><a href=""></a><img title="Projekte2" src="img/projekte.jpg"  /></li>
            <li><a href=""></a><img title="Projekte3" src="img/projekte.jpg"  /></li>
            <li><a href=""></a><img title="Projekte4" src="img/projekte.jpg"  /></li>
            <li><a href=""></a><img title="Projekte5" src="img/projekte.jpg"  /></li>
            <li><a href=""></a><img title="Projekte6" src="img/projekte.jpg"  /></li>
            <li><a href=""></a><img title="Projekte7" src="img/projekte.jpg"  /></li>
            <li><a href=""></a><img title="Projekte8" src="img/projekte.jpg"  /></li>
            <li><a href=""></a><img title="Projekte9" src="img/projekte.jpg"  /></li>           
        </ul>
        <div class="proper"></div>
    </section><!-- end section -->

これは 3x3 の画像のマトリックスである必要があり、ページの他の場所には 7x4 の画像のマトリックスがあるはずですが、どちらも奇妙に動作します。どちらも、両側とその位置に 3 つのマージン列があることを尊重しません。

想定される 7x4 マトリックスは次のようになり、想定される 3x3 マトリックスは次のようになります。

CSSコードは次のとおりです。

section {
    @include boxcolor($section-container);
    width: 100%;
    @include no-bullets;
    @include box-shadow(black 2px 2px 10px);
    margin-bottom: 2*1.5em;
    padding-bottom: 2*1.5em;
    clear: both;
}

.customers li {
    @include squish(3,3);
    @include span-columns(2,18);
    @include nth-omega(7n);
    margin-left:0;
}

.moodlegrid li{
    @include squish(3,3);
    @include span-columns(6,18);
    @include nth-omega(3n);
    margin-left:0;
}

とりあえず以上です。Susy がなぜこのような振る舞いをしているのか、少しでもわかる人はいますか? 特に、すべてが基本的に収まる必要がある3x3マトリックスでは、6 + 3*6設定した列の数に等しくなります。なんとなく紛らわしい。

4

1 に答える 1

0

列に使用しているのと同じ要素を押しつぶしたくありません。あなたは親を押しつぶしたいです。でオーバーライドするため、現在squishは何もしていませんspan-columns。

.customers {
  @include squish(3,3);
  li {
    @include span-columns(2,18);
    @include nth-omega(7n);
  }
}

.moodlegrid 
  @include squish(3,3);
  li{
    @include span-columns(6,18);
    @include nth-omega(3n);
  }
}
于 2012-10-08T17:50:06.483 に答える