Как заставить divs в одну строку при использовании Blueprint CSS

Question

Я использую blueprint-css, и я хотел бы иметь горизонтальную полосу прокрутки в span-24, которая позволяет отображать 3 div-12 divs на такой же ряд. Кажется, это должно быть просто, но я не могу заставить его работать. Переполнение-x: прокрутка дает мне полосу прокрутки, но последний интервал -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/