我可以用CSS实现元素的垂直包装吗？

Question

我正在实施一个拖放系统来将元素传输到容器div。我希望这些转移的元素保持在一个列中，直到它们达到容器的高度，然后＆＃34;包裹＆＃34;到下一栏，依此类推。

不幸的是，项目计数不会被预先确定。实际上，我希望最终能够将元素包含在这种布局中：

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

column-count属性是一个不错的主意，但它似乎在填充可用高度之前将内容传播到其他列。

Answer 1

你可以使用flex-box来做

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以使用flex，但您需要为容器设置最大高度，您可能需要使用javascript设置，因为您不知道列表的长度。

您可以使用CSS列，而不需要事先知道项目数。缺点是缺乏对IE10及以下版本的支持。

＆＃13;

＆＃13;

.container {
  display: block;
  width: 50%;
  -webkit-column-count: 3;
  -moz-column-count: 3;
  column-count: 3;
  column-gap: 2em;
  -webkit-column-gap: 2em;
  -moz-column-gap: 2em;
}

.container div {
  text-align: center;
  width: 100%;
  padding: 2em 0;
  background: #2980b9;
  color: white;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
  margin-bottom: 2em;
}

＆＃13;

<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>8</div>
  <div>9</div>  
</div>

＆＃13;

＆＃13;

＆＃13;