如何在使用Blueprint時強制div進入同一行CSS

我正在使用blueprint-css，我希望在span-24中有一個水平滾動條，允許下面的3個span-12 div顯示在同一排。這似乎應該是一件簡單的事情，但我無法得到它的工作。 overflow-x：scroll給我一個滾動條，但最終的span-12顯示在一個新行上。如何在使用Blueprint時強制div進入同一行CSS

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

來源

2012-04-24 bons

隨着電網公司始終不太好，試圖修改網格佈局系統，所以我建議你創建你的表格列內一個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/

來源

2012-04-24 13:50:17

我不明白這是如何解決我的問題。我仍然與前兩名分開排列第三個分區。我也嘗試設置空白：nowrap;在.table容器中，但這沒有幫助。 – bons 2012-04-24 14:02:18

剛剛看到您的編輯。我的目標是沒有跨度加起來。我想要一個水平滾動條來讓我滾動查看溢出。 – bons 2012-04-24 14:04:02

哦，好的，那麼我們並不需要有一個span類作爲一個容器，它是否總是在你的表容器div中是'span12'？ – 2012-04-24 14:04:40

如何在使用Blueprint時強制div進入同一行CSS

回答

相關問題