0

Susy 2.0.0 を使用して非対称グリッド レイアウトを構築しています。ここでは、実行中のテキストが途切れることなく継続できるように、グリッド アイテムを左右にフロートさせる必要がある場合があります。

たとえば、動画を本文中の段落の左、右、または中央に揃えたい場合があります。通常、フロートのように動作します。ここを除いて、私のプロジェクトの制約により、横に表示するアイテムが他にない場合、各段落を行の唯一のアイテムとして配置する必要があります。

https://dl.dropboxusercontent.com/s/vbuflsjun1p4shm/Screenshot%202014-04-12%2017.31.06.png

この特定のケースでは:

  1. 右側のビデオは、ランニング テキストの右端の横に並べる必要があります。
  2. ビデオを消去することなく、ランニングテキストが途切れることなく続く必要があります

Last Flow 設定を使用してみましたが、あまり役に立たないようです。実際、これを とともに使用すると@include post(1)、生成されたポスト マージンは最後の列の幅と等しくなく、代わりに一番左の列の幅のように見えます。

明確にする必要があるかどうか、または Codepen などに投げ込むのに役立つかどうかを教えてください。

HTML

<div class="sup">
  <figure class="sup-content">
    <div class="video"></div>
    <figcaption class="sup-content-caption"></figcaption>
  </figure>
  <div class="sup-grafs">
    <p>A secure is an unstriped bomber. What we don’t know for sure is whether or not the snowless credit comes from a meagre size.</p>
    <p>What we don’t know for sure is whether or not a tuna is a liver’s mexico. A lotion can hardly be considered a tearless rest without also being a save.</p>
    <p>A kookie expansion’s chill comes with it the thought that the podgy chair is a japan. Few can name an unsafe editorial that isn’t a sodden bra. Few can name a tinny bee that isn’t a luckless rhinoceros.</p>
  </div>
</div>

SCSS

$susy-grid-sup: (1 2 1 3 3 1 3 2);

$susy: (
  columns: $susy-grid-sup,
  gutters: 1/4,
  math: fluid,
  output: float,
  gutter-position: inside,
  last-flow: to,
  debug: (
    image: show,
  ),
);

p {
  @include pre(3);
  @include span(2 at 4);
  @include break();
}

.sup--right {

  .sup-grafs {
    p {
      @include nobreak();
    }
  }

  .sup-content {
    @include span(2 at 2 last);
    @include post(1);
    @include break();
  }
}
4

1 に答える 1

0

質問が正しくありません。あなたが抱えている問題はlocation、流れの方向ではなく、引数に関連しています。両方答えてみます。

非対称グリッドを使用している場合、(両方とここで)列にまたがっている場合はいつでもlocation( ) 引数について非常に明確にする必要があります。現在、ビデオは列 2 ～ 3 の幅に設定されており、その後にマージンがあり、列 1 の幅になっています。atspanpost

これを試して：

.sup-content {
  @include span(2 at 6 last);
  @include post(last 1);
  @include break();
}

last明示的な列インデックスが指定されていない場合、Susy は場所を決定するために使用します。

rtlまたはを追加することで、速記で流れの方向を変更することもできますltrが、グリッドの全体的な理解が反転するため、この場合にまったく役立つかどうかはわかりません. オーバーライド引数を簡単に追加rightしてleftフロートすることができ、おそらくそうするべきです。github でお気軽に問題を送信してください。

于 2014-04-13T19:29:51.290 に答える