html - 柱内自动位移

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 列不适用于 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;
}