Question

我想我设法解决了Susy的大部分起步问题。唯一奇怪的是，我无法弄清楚它是为什么它在创建图像矩阵时的行为。

这是我的设置：

$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矩阵看起来像this，和假定的3x3矩阵看起来像this。

这是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等于我设置的列数。以某种方式混淆。

Answer 1

您不希望挤压您为列使用的相同元素。你想要挤压父母。目前，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);
  }
}

Susy中定义的图像矩阵没有正确排列

1 个答案: