*ngFor从底部开始创建html元素

Question

我想创建一个类似trello板的东西。为此，我写了2列，样式为width = 20%，display = inline block。在一列中，我使用*ngFor来打印动态元素，而在另一列中，我写道 <mat-list-item></mat-list-item> 为多张卡。请在下面找到代码和截图。

请从app.component.ts中找到如下代码。

我的问题是，我不明白为什么*ngFor代码一开始跳过几个空格，然后开始在底部打印内部代码，以匹配第二列的静态数据。请参考截图1，以便更好的理解。先谢谢你了(我用的是最新版本的angular和angular material)

Answer 1

问题在于 inline-block 的 container 项目。 默认的 vertical-align 价值 inline-block 是 baseline. 如果您将两列都设置为 vertical-align: top 他们都将从头开始。

https:/stackblitz.comeditangular-fdkfkz

http:/infoheap.comcss-inline-block-baseline-alignment。

---

注: 如果你使用的是bootstrap，你也许应该按照@Rick的建议来构建，而不是做内联样式。

Answer 2

我想你可能想使用这种格式。

<div class="container">
  <div class="row">
    <div class="col-sm-6">
      //first list here
    </div>    
    <div class="col-sm-6">
      //second list list here
    </div>
  </div>
</div>