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

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>

顺便说一句，刚刚注意到您的跨度类不加起来，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/