如何使项目溢出到列中？

Question

我有一个div，我在foreach循环中将一些记录逐个放在一列中，如下所示：

aaa
bbb
ccc
ddd
eee

问题是我所在的框有静态高度，那些元素在div之外，而我想在溢出时出现这样的东西：

aaa ddd
bbb eee
ccc

我该怎么做？

Answer 1

如果您需要将项目放置在容器的开头，可以尝试flexbox，添加align-content: flex-start;。

浏览器支持表和供应商前缀详细信息here。

<强> Example

div {
    display: flex;
    flex-flow: column wrap;
    border: 1px solid red;
    height: 60px;
}

<div>
    <span>aaa</span>
    <span>bbb</span>
    <span>ccc</span>
    <span>ddd</span>
    <span>eee</span>
</div>

Answer 2

您可以尝试使用以下方式设置div高度：

height:auto