jquery - CSS:使多个div向下 float ，然后在到达文档末尾时向右浮动

Question

我的代码创建了一组 .rectangle div，它们似乎都“漂浮”了下来。我希望它们向下 float ，直到不再适合容器，然后再向右创建一列，依此类推。我可以用 css 实现吗？

我制作了一个 jsfiddle 来演示 here .

Answer 1

您可以使用 Flexbox 并在父级上设置 flex-direction: column 和 flex-wrap: wrap。

for (i = 0; i < 9; i++) {
  $("<div class='rectangle'>" + i + "</div>").appendTo("body")
}

body {
  display: flex;
  flex-direction: column;
  height: 100vh;
  flex-wrap: wrap;
  align-content: flex-start;
}

.rectangle {
  background: snow;
  border: 1px solid black;
  text-align: center;
  height: 55px;
  width: 90px;
  margin: 10px;
  /*float property?*/
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>