html - 有没有办法将一些 <div> 标签垂直分成两列？

Question

有没有办法将特定的 div 分成两列？以及 div 垂直对齐的方式。

我的 css 文件如下所示

#views-form
 {
  -webkit-columns: 2;
  -moz-columns: 2;
  columns: 2;
  padding-left: 0;
}

#views-form .item-list {
  list-style-position: inside;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
}

但它会导致将表单内的所有 div 分成两列。

<form id="views-form">
   <div></div>
   <div class="item-list"></div>
   <div class="item-list"></div>
   <div class="item-list"></div>
   <div class="item-list"></div>
   <div class="item-list"></div>
    ....
   <div></div>
</form>

我需要将类为“item-list”的 div 标签分成两列。不幸的是，我无法将“元素列表”div 包装在其他标签中。我希望潜水垂直对齐。所以它看起来像下面这样:

<form>
 <div></div>
 <div class="item list"> 1 </div> | <div class="item list"> 4 </div>
 <div class="item list"> 2 </div> | <div class="item list"> 5 </div>
 <div class="item list"> 3 </div> | <div class="item list"> 6 </div>
 <div> </div> 
</form>

Answer 1

要将这些对对齐到与评论中所述相同的高度，您可以将 display: flex 应用于容器并定义 flex 元素的 width为 50%，同时通常将这些 DIV 的默认设置设置为 100%，以便其他 DIV 填充整个容器宽度:

#views-form {
  display: flex;
  flex-wrap: wrap;
}

#views-form>div {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid green;
}

#views-form .item-list {
  width: 50%;
}

<form id="views-form">
  <div>something</div>
  <div class="item-list"> some text some more text some more text some more text some more text some more text  </div>
  <div class="item-list">  some more text some more text some more text some more text some more text some more text some more text some more text some more text some more text some more text </div>
  <div class="item-list">  some more text some more text some more text some more text some more text some more text some more text some more text </div>
  <div class="item-list">  some more text some more text some more text some more text some more text </div>
  <div class="item-list">  some more text some more text some more text some more text some more text some more text some more text some more text some more text some more text some more text some more text some more text some more text </div>
  <div class="item-list">  some more text some more text some more text some more text some more text some more text </div>
  <div>something else </div>
</form>