0

我想我设法解决了与 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 矩阵看起来像这样，假设的 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;
}

暂时就是这样。有人知道为什么苏西会这样吗？尤其是在 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 回答