柱中的自动位移

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-columns来实现它，但要小心：

1. css-columns不适用于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;
}