Question

有一个div容器，这是一个使用拖拽拖放的包。

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

我尝试了很多方法 - 尝试使用浮点数，div使用表类，...到目前为止没有任何工作。顺便说一句 - 我正在使用Angular。

有什么想法吗？

为了使它更复杂一点 - 如果浏览器窗口低于certian大小，显示将变为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的高度可以变化，并且每行的高度始终相同。

如何将动态div列表排列为2列

1 个答案: