为什么我的display：inline-block; 属性从上到下而不是从左到右显示？

Question

I am creating a dynamic layout of divs that use display:inline-block, to help fit the content, since it could be different heights.

Here is the code I am using, but for some reason, my divs display like

1357
2468

Rather than

1234
5678

Code I am using:

article{
 -moz-column-width: 13em;
 -webkit-column-width: 13em;
 -moz-column-gap: 1em;
 -webkit-column-gap: 1em; 

}

section{
 display: inline-block;
 margin:  0.25rem;
 padding:  1rem;
 width:  100%; 
 background:  #efefef;
}

and here is my JSFiddle

Answer 1

It's because of the column CSS property, who display elements in "columns" from top to bottom.

To get a horizontal behavior, you can use display: inline-block or use JS plugin such as masonry.

Fiddle with inline-block aligment

Answer 2

Have you tried inline-flex ? I created this jsFiddle