How to force divs into the same row when using Blueprint CSS
-
03-06-2021 - |
Pregunta
I'm using blueprint-css and I would like to have a horizontal scroll bar in the span-24 which allows the 3 span-12 divs below show up on the same row. This seems like it should be a simple thing but I can't get it working. The overflow-x:scroll gives me a scroll bar but the final span-12 shows up on a new line.
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;
}
Solución
With grids its always not so good to try to modify the grid layout system so i would suggest that you create a div inside your grid column instead of trying to modify the span
class itself, like so:
<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>
By the way, just noticed that your span classes don't add up, 12+12+12 is 36, while your container is 24, try to lower your inner span classes to add up to 24, like so:
<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>
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow