0

要素の幅が異なる場合、 Susyは複数列のレイアウトを自動的に埋めることができますか?

私が欲しいもの（以下のコードを参照）：

+---------+---------+---------+
| I       | want    | this    |
+---------+---------+---------+
| filled  | automatically!    |
+---------+-------------------+

私が得るもの（以下のコードを参照）：

+---------+---------+---------+
| I       | want    |         |
+---------+---------+---------+
| this    | filled  |         |
+---------+---------+---------+
| automatically!    |         |
+---------+---------+---------+

目的？レスポンシブ レイアウトの場合、小さい画面用に 2 つの列に切り替えることができるはずです (メディア クエリ ブレークポイント)。

+---------+---------+
| I       | want    |
+---------+---------+
| this    | filled  |
+---------+---------+
| automatically!    |
+-------------------+

これは、すべての要素を左にフロートさせるだけで実装できます。ただし、Susy のようなものを使用して複雑さを軽減したいと考えています。

HTML:

<div id="container">
  <div class="one">I</div>
  <div class="one">want</div>
  <div class="one">this</div>
  <div class="one">filled</div>
  <div class="two">automatically</div>
</div>

SCSS、Omega なしで動作しない:

@import 'susy';

$total-columns: 3;
$column-width: 200px;
$gutter-width: 5px;
$grid-padding: 10px;

#container {
    @include container;
    @include susy-grid-background;

    &>div {
        height: 50px;
    }

    &>div.one {
        @include span-columns(1);
    }

    &>div.two {
        @include span-columns(2);
        background: yellow;
    }
}
4

1 に答える 1

1

Susy には、at-breakpoint()さまざまなメディアクエリ ブレークポイントでさまざまな列数を確立するための mixin があります。でもいいえ、自動的にはできません。

于 2013-01-22T08:45:50.847 に答える