html - 如何将 div 的动态列表排列成 2 列

Question

有一个 div 容器，它是一个使用 dragula 进行拖放的包。

我还有一个 div 列表，我想在这个容器中以 2 列排列 - 但理想情况下它应该看起来像一个表格，所以 2 个彼此相邻的 div 最终应该具有相同的大小。此外，div 列表可能会有所不同 - 另一个 div 可能会被放入 dragula 容器中或被删除。

我尝试了很多方法 - 尝试使用 float ，使用表格类的 div，......到目前为止没有任何效果。顺便说一句——我正在使用 Angular。

有什么想法吗？

让它更复杂一点——如果浏览器窗口小于一定大小，显示将变为 1 列。

添加一段不起作用的代码:

    <div [dragula]='"bag-fields"'[dragulaModel]="layout.sections[i].fields" style="min-height: 20px" style="width: 100%; display: flex">
        <div *ngFor="let field of section.fields" style="flex: 1; width 50%">
           <div atx-label class="labelCol" [field]="field" style="width: 50%"></div>
           <div atx-field class="dataCol" [field]="field" [layoutMode]="true" [editable]="false" style="width: 50%"></div>
       </div>
   </div>

Rgds迈克尔

Answer 1

我不完全确定我是否理解正确，但您是否正在寻找这样的东西:

.bag-fields {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

.bag-field {
  background-color: #ddd;
  width: 50%;
  min-height: 100px;
  padding: 12px;
  box-sizing: border-box;
  background-clip:content-box;
}

/* to make it 1 column on certain viewport width */
@media (max-width: 600px)  {
  .bag-field {
    width: 100%;
  }
}

/* for testing purpose */
.bag-field:nth-child(3n) {
  min-height: 200px;
}

<div class="bag-fields">
  <div class="bag-field">
    <div class="col labelCol"></div>
    <div class="col dataCol"></div>
  </div>
  <div class="bag-field">
    <div class="col labelCol"></div>
    <div class="col dataCol"></div>
  </div>
  <div class="bag-field">
    <div class="col labelCol"></div>
    <div class="col dataCol"></div>
  </div>
  <div class="bag-field">
    <div class="col labelCol"></div>
    <div class="col dataCol"></div>
  </div>
  <div class="bag-field">
    <div class="col labelCol"></div>
    <div class="col dataCol"></div>
  </div>
</div>

它在容器上使用display: flex 和flex-wrap 将div 排列成列。然后将 div 宽度设置为容器宽度的 50%，使其成为一个 2 列列表。 div 的高度可以是可变的，并且每行的高度始终相同。