如何在使用蓝图 CSS 时强制 div 进入同一行

Question

我正在使用蓝图-css，我想在span-24中有一个水平滚动条，它允许下面的3个span-12div显示在同一行。 这似乎应该是一件简单的事情，但我无法让它工作。 溢出-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，试着降低你的内部 span 类加起来到 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/