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

Question

我正在创建一个使用display：inline-block的div的动态布局，以帮助适应内容，因为它的高度可能不同。

这是我正在使用的代码，但是由于某种原因，我的div显示为

1357
2468

而不是

1234
5678

我正在使用的代码：

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

这是我的JSFiddle

Answer 1

这是由于CSS属性column ，该属性从上到下在“列”中显示元素。

要获得水平行为，可以使用display: inline-block或使用JS插件（如砌体）。

内联技巧的小提琴

Answer 2

您是否尝试过inline-flex ？ 我创建了这个jsFiddle