Question

我正在使用blueprint-css，我想在span-24中有一个水平滚动条，允许下面的3个span-12 div显示在同一行上。这似乎应该是一件简单的事情，但我无法让它发挥作用。 overflow-x：scroll给了我一个滚动条，但最后的span-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;
}

Answer 1

使用网格时，尝试修改网格布局系统总是不太好，所以我建议您在网格列中创建一个div，而不是尝试修改span类本身，如下所示：

<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>

顺便说一句，只是注意到你的span类没有加起来，12 + 12 + 12是36，而你的容器是24，尝试降低你的内部扩展类最多可以加24，如下所示： / p>

<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/

使用Blueprint CSS时如何强制div进入同一行

1 个答案: