0

別の非常によく似た質問がすでに尋ねられています。

6 列の要素で構成されるギャラリーを設定しました。ただし、最初の要素がギャラリーの最初の 2 列にまたがるようにします。

現在の間違ったレイアウトのスクリーンショット

$deskcol : 12;

.colSixth {
  @include gallery(2 of $deskcol);
}

.colSixth.strap {
  ??
}

<div class="colSixth strap">
   content should span two Sixths
</div>
<article class="colSixth">
    content spans one sixth
</article>
<article class="colSixth">
    content spans one sixth
</article>
<article class="colSixth">
    content spans one sixth
</article>
<article class="colSixth">
    content spans one sixth
</article>

gallery関数を2つオフセットする方法はありますか? 隔離してみました。また、要素に余分なパディングを追加しました.strapが、ギャラリーの最初の行がページの外に押し出されます。そして&:first-child、さまざまなフレーバーのセレクターも試しました。

4

2 に答える 2

2

最初の項目だけを 2 つの列にまたがらせたいですか? その場合、ギャラリー機能を使用したくない場合があります (代わりにスパンを使用してください)。

物事を簡単にするために、ガターを内側に切り替えることもできます.

代わりにできることは次のとおりです。

.colSixth {
  @iinclude span(2 of 12 inside); 

  &:first-child {
    @include span(4 of 12 inside); 
  }
}

それを試して、私に知らせてください。

于 2015-05-19T00:52:46.753 に答える