html - 我可以用 CSS 实现元素的垂直环绕吗？

Question

我正在实现一个拖放系统以将元素传输到容器 div。我希望这些转移的元素在达到容器的高度之前保持在一个列中，然后“换行”到下一列，依此类推。

很遗憾，元素数量不会预先确定。实际上，我希望最终得到一些将元素包装到这种布局中的东西:

...按照您在此处看到的顺序将元素加载到容器中。

column-count 属性是个好主意，但它似乎在填充可用高度之前将内容分散到其他列。

Answer 1

您可以使用 flex-box 来做到这一点

.container {
  width:200px;
  height:300px;
  display:flex;
  flex-direction:column;
  flex-wrap: wrap;
}
.container div {
  text-align:center;
  width:50px;
  height:50px;
  background:red;
  color:white;
  margin:10px;
}

<div class="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
</div>