如何使物品按订单占据空间

Question

我有一个HTML，此HTML有两个儿童的HTML。在父母的html上，我有一个名为.page的Div，这是孩子需要占用的大区域。两个孩子的大小都相同，我需要他们按顺序产卵。因此，假设第一个儿童组件将在1位置产生（如下图中），而另一个孩子的组件则需要遵循订单，如果左边有空间，则可以占用下面的空间左边的元素？

需要如何：

现在如何工作：

CSS：

.page {
  display: flex;
  width: 26.4cm;
  height: 37cm;
  flex-wrap: wrap;
  align-content: flex-start;
  overflow: hidden;
}

儿童网格：

.displayGridSlip {
  display: grid;
  width: 13cm;
  grid-template-columns: 13cm;
  grid-template-rows: 1.7cm 4.9cm 0.5cm;
  grid-template-areas:
    "h"
    "b"
    "f";
  border-bottom-style: dashed;
  border-bottom-width: 0.3mm;
  border-right-style: dashed;
  border-right-width: 0.3mm;
  padding-top: 0.2cm;
}

主HTML代码

<div *ngFor="let itemCapa of arraySlips.capa; let k = index;">
    <div class="page">
        <app-slip-capa [itemCapa]="itemCapa"></app-slip-capa>
        <app-slip-conteudo [item]="arraySlips.info" [itemCapa]="itemCapa"></app-slip-conteudo>
    </div>
</div>

Answer 1

我认为，在 *ngfor的一个错误之后，使用Div中的.page类是错误的，因为这样您就将所有26厘米宽度用于每个元素，而不是其中的一半。
我不确定这是您要寻找的答案，但请尝试在Div树的开头使用.page，然后在 *ngfor div上使用Col-6，以便仅使用每个元素的列宽度的一半：

    <div class="page">
        <div class="col-6" *ngFor="let itemCapa of arraySlips.capa; let k = index;">
            <div class="">
                <app-slip-capa [itemCapa]="itemCapa"></app-slip-capa>
                <app-slip-conteudo [item]="arraySlips.info" [itemCapa]="itemCapa"></app-slip-conteudo>
            </div>
        </div>
    </div>

另外，我不确定使用厘米是否正确（请参阅此答案： https://stackoverflow.com/a/a/16297686/8003673 ），但请根据需要尝试。如果是错误的，请尝试使用其他维度。
如果您尝试以下代码之类的内容，则使用每个元素的页面维度的一半来工作：

            <div class="row">
                <div class="col-6 div-to-the-left" *ngFor="let i of [0,1,2,3,4,5,6,7,8]; let k = index;">
                    <div class="">
                        <span>test {{i}}</span>
                    </div>
                </div>
            </div>