2

次の HTML 構造があるとします。

<div id="a">
  A
  <div id="b">
    B
  </div>
</div>

...そして次の Singularity SCSS:

$grids: 6;
$gutters: .1;
$gutter-styles: 'split';

div#a {
  @include grid-span(5,2)
}

div#b {
  // @todo: position and width.
}

...次のようなレイアウトを作成したいと思います。ここでは、B がコンテナー A から 1 列左に引き出され、左端の 2 列にまたがります。

  -----------
  |  A      |
-----       |
| B |       |
-----       |
  |         |
  -----------

もちろん、私は自分で計算を行うことができますが、Singularity mixins と関数を使用してこれが可能になるはずだと感じています (結局のところ、それが私がグリッド フレームワークを使用している理由です :-)) しかし、寸法と配置を取得できませんBの正解。

の幅 (列スパン) と位置 (負のマージン左) を設定するには、どの Singularity mixins および/または関数を使用しdiv#bますか?

4

2 に答える 2

1

答えは、#A ブロック内でどのようなフローが必要かによって大きく異なります。

流れを保つ

最も簡単な方法は、#B ブロックを負のマージンで外側に引っ張ることです。

そのためには、ミックスインを使用しないでくださいgrid-span()。代わりに、widthおよびmarginCSS プロパティを使用してください。column-span()これらのプロパティの値は、およびgutter-span()ヘルパー関数を使用して計算できます。

これらのヘルパー関数$gridは、グリッド コンテキストを表す引数を受け入れます。メイン グリッドより 1 列少ない #A ブロックのグリッド コンテキストを提供する必要があります。

$grids: 6
$gutters: .1
$gutter-styles: 'split'

$a-columns-width: 5

#a
  +grid-span($a-columns-width,2)
  overflow: visible

#b
  width: column-span(2, 1, $grid: $a-columns-width)
  margin-left: - column-span(1, 1, $grid: $a-columns-width) - gutter-span($grid: $a-columns-width)

デモをご覧ください: http://sassbin.com/gist/6676220/

フローから #B を削除する

ただし、#B ブロックはフローから除外されません。#A ブロックの幅全体を占めるので、#B の右側には何も配置できません。

#B の右側にテキストなどを配置する必要がある場合は、別の方法を使用することを検討してください。絶対的なポジショニングが私の頭に浮かぶものです。

解決策はより複雑になります。私に考えてもらいたい場合は、あなたの仕事をもっと詳しく説明してください。たぶん、グラフィカルなテンプレートを提供してください。

また、#A のコンテンツが #B によってカバーされないようにするために、いくつかのトリックを使用する必要があります。

フラットな HTML 構造で物事がシンプルに

また、そもそもなぜネストされた構造 (#A 内の #B) が必要なのですか? 構造をフラットにすると、ブロックの配置が単純になります。

#a
  +grid-span(5,2)

#b
  +grid-span(2,1)
  margin-top: 4em

デモ: http://sassbin.com/gist/6676193/

ただし、#A のコンテンツが #B の下に表示されることは依然として問題です。

PS回答に満足できない場合は、タスクをより詳細に説明し、#A のすべてのコンテンツを含む目的のページの図を提供してください。

于 2013-09-23T20:13:36.280 に答える
1

このようなものは、あなたが探しているもののようです: http://sassmeister.com/gist/6663743

于 2013-09-22T21:02:04.710 に答える