Can I arrange CSS columns horizontally and not vertically?

Question

Here is my code:

.column { column-count: 4; column-gap: 10px; -moz-column-count: 4; -moz-column-gap: 10px; -webkit-column-count: 4; -webkit-column-gap: 10px; } 

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

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

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

Is it possible? How should I do it?

Answer 1

Even simpler:

 .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

Answer 2

Mansonry.js is a solution. Check out this http://masonry.desandro.com/ Also check out this demo. This is what you need, I think .. I am also trying to implement such a thing :) http://tympanus.net/Development/GridLoadingEffects/index2.html

As far as I know, there is no way to do this with CSS, only sad

Answer 3

This time I really put in a little effort. ignore everything from previous edit

the display inline-blocks property is probably what you want to use.

Here is a detailed guide to its use.

And here is a brief demonstration

 li { width: 200px; display: inline-block; } 

Answer 4

check my simple codes below url. https://github.com/JJ81/column-count maybe you may have what you want.

Answer 5

Apply this:

 .column { width: 100px; overflow:hidden; } .column .inner { width: 20px; float:left; text-align:center; }