如果有足够的空间，如何将div列表拆分为两列？

Question

我们说我有8个div。如果有足够的空间（通过min-width），我希望将它们分成两列：

 1  5
 2  6
 3  7
 4  8

但是，如果我只是设置display: inline-block，他们就会像这样分开，这不是我想要的：

 1  2
 3  4
 5  6
 7  8

理想情况下，我正在寻找一种允许不等大小的解决方案，所以如果只有6个，但＃1和＃2是双倍高度，结果将如下所示：

1  3
1  4
2  5
2  6

这在纯CSS中是否可行？或者，如果没有，如何在JS中完成？

Answer 1

您可以使用CSS列来实现此行为：

html {
  font-size: 62.5%;
}

.columnWrapper div {
  display: inline-block;
  width: 100%;
  height: 10rem;
  color: #fff;
  text-align: center;
  font-size: 5rem;
  line-height: 10rem;
  background-color: #4caf50;
  margin-bottom: 0.5rem;
}

.columnWrapper {
  -webkit-column-count: 2;
  -moz-column-count: 2;
  column-count: 2;
  -webkit-column-gap: 0.5rem;
  -moz-column-gap: 0.5rem;
  column-gap: 0.5rem;
  width: 20%;
  margin: 0 auto;
}

@media screen and (max-width: 500px) {
  .columnWrapper {
    -webkit-column-count: 1;
    -moz-column-count: 1;
    column-count: 1;
  }
}

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

或者看this小提琴。

对于只有六个元素的情况，请参阅this小提琴（相同代码）。