html - 有没有办法将一些 标签分成两列？

Question

有没有办法将特定的 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 包装在其他标签中。

Answer 1

这在 Firefox 中不起作用:请参阅:Browser Compatibility table在 MDN columns-span doc , this bugreport

#views-form {
  -webkit-columns: 2;
  -moz-columns: 2;
  columns: 2;
  padding-left: 0;
}
#views-form > div {
  -webkit-column-span: all; 
  -moz-column-span: all;
  column-span: all;
}

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

}

<form id="views-form">
   <div>1</div>
   <div class="item-list">2</div>
   <div class="item-list">3</div>
   <div class="item-list">4</div>
   <div class="item-list">5</div>
   <div class="item-list">6</div>
   <div>7</div>
</form>