Warum ist mein Display: Inline-Block; Eigenschaft wird von oben nach unten und nicht von links nach rechts angezeigt?

Question

Ich erstelle ein dynamisches Layout von divs, die display: inline-block verwenden, um den Inhalt anzupassen, da es unterschiedliche Höhen haben kann. Hier

ist der Code, den ich verwende, aber aus irgendeinem Grund, meine divs Anzeige wie

1357 
2468 

Statt

1234 
5678 

-Code Ich bin mit:

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

und Hier ist meine JSFiddle

Answer 1

Es ist wegen der CSS-Eigenschaft column, die Elemente in "Spalten" von oben nach unten anzeigen.

Um ein horizontales Verhalten zu erhalten, können Sie display: inline-block verwenden oder JS-Plugin wie Mauerwerk verwenden.

Fiddle with inline-block aligment

Answer 2

Haben Sie inline-flex versucht? Ich habe dieses jsFiddle