Автоматическое смещение в колонке

Question

У меня есть этот код:

<div class="parent"> 
    <div>Text 1</div> 
    <div>Text 2</div> 
    <div>Text 3</div> 
    <div>Text 4</div> 
    <div>Text 5</div> 
    <div>Text 6</div> 
</div> 

У меня есть 6 элементов в одном из родителей, если я могу помочь с CSS превратить их в 3 колонки? То есть, когда высота дочерних элементов достигает высоты родителя, они смещаются вправо? Теперь он выглядит:

Text1 
Text2 
Text3 
Text4 
Text5 
Text6 

Я хочу, чтобы выглядеть следующим образом:

Text1 Text3 Text5 
Text2 Text4 Text6 

Извините за мой плохой английский. Благодарю.

Answer 1

вы можете использовать CSS-столбцы, чтобы достичь его, но будьте осторожны:

1. CSS-колонки не работают для IE9 или старше
2. столбцов делать автоматически разделяют содержание равномерно между колоннами, так зависит от длины содержимого отдельных div, как распределяется контент.

http://jsfiddle.net/tgv2rx7f/120/

.parent { 
-webkit-column-count: 3; /* Chrome, Safari, Opera */ 
-webkit-column-gap: 30px; /* Defines the space between the columns for Chrome, Safari, Opera */ 
-moz-column-count: 3; /* Firefox */ 
-moz-column-gap: 30px; /* Defines the space between the columns for Firefox */ 
column-count: 3; 
column-gap: 30px; 
}