自动div溢出到父div [保留]

Question

我有一个<div>（容器，固定大小），我想以这种方式添加较小的<div>（不是固定大小）：

https://i.imgur.com/depniC9.png

[我试图使其能够自动“溢出” <div>，并在到达容器<div>的末端时将它们置于顶部<div>的旁边。

我可以通过使用包含容器<div>中每一列的附加<div>来实现这一目标，但是我必须每次计算大小并从列中删除<div>。

有没有办法做到这一点？谢谢：）

JSFiddle在这里：https://jsfiddle.net/oc70fzpq/1/

Answer 1

您可以使用columns CSS property：

columns

Answer 2

这是正确使用

.container {
  columns: 2;
}

的完美案例

如果设置为display: flex;，则将自然阅读方向“旋转”为“从上到下”，并使用flex-direction: column;，请确保内容不会在容器外溢出。

通过给容器适当的宽度，确保容器内的div有足够的空间容纳两行（或更多）。

注意：如果为div提供更多属性，例如flex-wrap: wrap;或border，则可能是您必须计算margin才能使它们再次适合。

这是我的基本示例，具有不同的div高度（就像您提到的那样：]]

width
.container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;

  width: 500px;
  height: 800px;
  border: 3px solid darkkhaki;
}

div {
  width: 50%;
}