0

blueprint-css を使用していますが、span-24 に水平スクロール バーを配置して、下の 3 つの span-12 div を同じ行に表示できるようにしたいと考えています。これは簡単なことのようですが、うまくいきません。overflow-x:scroll でスクロール バーが表示されますが、最後のスパン 12 が新しい行に表示されます。

HTML:

<div class="span-24 table-container">
  <div class="span-12">
    Some Content
  </div>
  <div class="span-12">
    Some Content
  </div>
  <div class="span-12">
    Some Content
  </div>
</div>

CSS:

div.table-container {
  overflow-x:scroll;
}
4

1 に答える 1

1

グリッドでは、グリッド レイアウト システムを変更しようとするのは常にあまり良くないため、次のspanように、クラス自体を変更するのではなく、グリッド列内に div を作成することをお勧めします。

<div class="span-24">
    <div class="table-container">
      <div class="span-12">
        Some Content
      </div>
      <div class="span-12">
        Some Content
      </div>
      <div class="span-12">
        Some Content
      </div>
    </div>
</div>

ちなみに、スパン クラスが合計されないことに気付きました。12+12+12 は 36 ですが、コンテナは 24 です。次のように、内側のスパン クラスを下げて合計 24 にします。

<div class="span-24">
    <div class="table-container">
      <div class="span-8">
        Some Content
      </div>
      <div class="span-8">
        Some Content
      </div>
      <div class="span-8 last">
        Some Content
      </div>
    </div>
</div>

デモ: http://jsfiddle.net/CbRgc/

于 2012-04-24T13:50:17.660 に答える