0

問題があります..要素が 3 列を占めるようにできません。3 列に等しい 12 のうち 4 にまたがるように設定しました。私は @include omega; でそれを行うことができました。最後の子ですが、要素が3つ以上ある場合、それは実際には解決策ではありません。3番目の要素にmargins-rightを追加するため、それはわかっていますが、どうすればそれを回避できますか? 3要素ごとにmargin-rightを削除するように？

SCSS

$susy: (
columns                     : 12,
gutters                     : 1/2,
container                   : 90%,
box-sizing                  : border-box,
);

$small                          : 30em;
$medium                     : 47em;
$large                          : 75em;

// layout
.layout {
    @include container();
.cases {
background-color: green;
    .case {
        @include span(4);
        background-color: blue;
        }
    }
}

HTML

        <article class="case">
            <a href="case.php">
                <div class="case-item case-img" style="background-image: url(img/img-1.jpg)">
                    <div class="case-info">
                        <header><h3>Case#1</h3></header>
                    </div>
                </div>
            </a>
        </article>
        <article class="case">
            <a href="case.php">
                <div class="case-item case-img" style="background-image: url(img/img-1.jpg)">
                    <div class="case-info">
                        <header><h3>Case#1</h3></header>
                    </div>
                </div>
            </a>
        </article>
        <article class="case">
            <a href="case.php">
                <div class="case-item case-img" style="background-image: url(img/img-1.jpg)">
                    <div class="case-info">
                        <header><h3>Case#1</h3></header>
                    </div>
                </div>
            </a>
        </article>
4

2 に答える 2

1
  1. まず、Susy を sass ファイルにインポートする必要があります。
  2. さらに、最後の子の margin-right を取り除く必要があります。

このコードを使用すると、動作するはずです：

@import "susy";

$susy: (
columns                     : 12,
gutters                     : 1/2,
container                   : 90%,
);

// layout
.layout {
    @include container();
}

.case {
  background-color: blue;
  @include span(4);
    &:nth-child(3n) {
     @include last;
  }
}
于 2014-12-22T11:28:54.040 に答える
1

ミックスインを試しましたかgallery()（ドキュメントを参照）？このユースケースを正確に処理するように構築されています。

.case {
  @include gallery(4);
}
于 2014-11-03T18:41:25.333 に答える