Question

我有一个容器，我想用拖拽掉其他div。如果可能，丢弃的div应具有相等的宽度（容器宽度> div的最小宽度之和）。

如果我使用flexbox，这不起作用（表或列表等其他选项也不起作用）。第一个下降将使这个下降的div占据所需宽度的100％。但在放弃下一个div后，第一个div不会调整大小，所有后续div只会有其最小尺寸。此外，容器随着每次额外的下降而增长。

这是我的容器和孩子们的风格：

.container {
  width: 100%;
  display: flex;
}
.child{
  width: 100%;
  flex: 0 1 auto;
}

这是将孩子放入的目标HTML代码（我使用角度）：

<div class="container" [dragula]='"bag-objects"' [dragulaModel]="container">
   <div *ngFor="let object of container" class="child>
      <objects [object]="object.object"></objects>
   </div>
</div>

我在stackoverflow上检查并测试了各种其他解决方案，但没有一个对我有用。

Answer 1

您需要从子项中移除dplyr，因为这会使所有孩子占据父项的100％宽度，而只需指定width:100%，如下所示：

flex:1

动态地将div添加到容器并使宽度相同

1 个答案: