0

Foundation の sass バージョンで列を動作させるのに問題があります。

行内に 4 つの列を作成しようとしています。

親は行になるように設定されています。4 つの子には次のルールが与えられます。

@include grid-column(3)

私の予想では、これにより 4 つの列が作成されるはずです12 / 4 = 3。

ただし、最後の列は行に収まらず、ギャップが残ります。ここで何が起きてるの？

ここに私が持っているものがあります:

私のサスソース：LINK

結果の html/css : JsFiddle

編集: ここにコードを貼り付けずに jsfiddle にリンクすると、stackoverflow でエラーが発生します。だからここに私のhtmlがあります：

 <section id="main-content"

        <section id="looptest">

          <h2>foundation/sass columns</h2>

          <div id="blocks">

            <div class="block">
              <p>block one</p>
            </div>
            <div class="block">
              <p>block two</p>
            </div>
            <div class="block">
              <p>block three</p>
            </div>
            <div class="block">
              <p>block four</p>
            </div>

          </div><!-- ENDS #blocks -->

     </section><!-- ENDS #looptest -->

  </section>  <!-- main-content ends -->
4

1 に答える 1

0

#blocksonly に設定する必要があります@include grid-row。代わりに、またに設定しています@include grid(12)。.blockクラスをネストしているようにも見えます。これも問題を引き起こす可能性があります。

プレゼンテーションクラスとの関係で考えてみてください。これは、プレゼンテーション クラスが実際にはまったく同じ sass および sass mixin によって生成されているため、特に重要です。

たとえば、プレゼンテーション クラスを使用すると、次のようになります。

<div class="row" id="blocks">
    <div class="large-4 columns block"></div>
    <div class="large-4 columns block"></div>
    <div class="large-4 columns block"></div>
</div>

したがって、sass はこれと同じ構造を模倣する必要があります。現時点では、次のようになっている可能性があります (ネスティングを除く)。

<div class="row large-12 columns" id="blocks">
    <div class="large-4 columns block"></div>
    <div class="large-4 columns block"></div>
    <div class="large-4 columns block"></div>
</div>

また、ネストされたグリッドを使用する場合は、常にrowdiv で囲む必要があることに注意してください。columns

したがって、単純な 3 列のレイアウトは次のようになります。

<div id="blocks">
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
</div>

最も単純な意味でのサスは次のようになります。

#blocks
  @include grid-row
.block 
  @include grid-column(4)
于 2013-09-22T08:53:24.247 に答える