Reputation: 6331
How do I get divs to float vertically like in this picture:
Background: I have a grid of checkboxes with content sorted alphabetically and I'd like to have alphabetic order progress vertically (since horizontal order is quite hard to follow). All the divs have same size (width like picture, height = 1 line size).
Update: To clarify: The main intention is to have a table layout with a variable amount of columns based on available screen width and have the cells in column-major order. The actual number of divs is not known in advance.
Upvotes: 15
Views: 4425
Reputation: 21852
If you are willing to set a fix height on the table holding the cells you could use flexbox.
Set your holding container to:
display: flex;
flex-direction: column;
flex-wrap: wrap;
And your child elements to:
flex-grow: 20%;
min-width: 200px;
See the pen: http://codepen.io/anon/pen/qIpAl
Upvotes: 4
Reputation: 125651
Although the following is not a complete solution, maybe others can build on it to achieve the necessary result:
Divs wrapped in a container div
div
{
width: 100px;
height: 50px;
background: orange;
border: 1px solid yellow;
display:block;
}
div:nth-child(4n)
{
display:table-cell;
}
.container
{
display:table;
width: 100%;
}
Upvotes: 1
Reputation: 635
@KunJ : compatibility of grid layout is very bad... ie10 + only, http://caniuse.com/css-grid
I think without JS you can't do the tricks, I had the same problem, in order to resolve them, I've load all elements, count them et replace in the good div
Upvotes: 2
Reputation: 1723
CSS
.cols {
width:20%;
float:left;
}
.rows {
height:100px;
}
HTML
<div class="cols">
<div class="rows">Div 1</div>
<div class="rows">Div 2</div>
<div class="rows">Div 3</div>
</div>
<div class="cols">
<div class="rows">Div 4</div>
<div class="rows">Div 5</div>
<div class="rows">Div 6</div>
</div>
<div class="cols">
<div class="rows">Div 7</div>
</div>
Upvotes: 5