Can I order my CSS columns horizontally instead of vertically?

Alan Yong picture Alan Yong · Jun 26, 2013 · Viewed 17.3k times · Source

Here is my code:

The result is:
1 4 7 10
2 5 8 11
3 6 9 12

What I want is:
1 2 3 4
5 6 7 8
9 10 11 12

Is that possible? How should I make it?

Answer

Alex Char picture Alex Char · Sep 25, 2014

Is even easier:

.inner:nth-child(4n+1) {
    clear: left;
}

.inner {
    float: left;
    margin: 5px;
}
<div class="column">
    <div class="inner">1</div>
    <div class="inner">2</div>
    <div class="inner">3</div>
    <div class="inner">4</div>
    <div class="inner">5</div>
    <div class="inner">6</div>
    <div class="inner">7</div>
    <div class="inner">8</div>
    <div class="inner">9</div>
    <div class="inner">10</div>
    <div class="inner">11</div>
    <div class="inner">12</div>
</div>

You can apply float: left and clear float: left every 4n+1 elements.

Ref:

:nth-child