如何在使用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/