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

Question

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

并且请从 app.component.ts 中找到代码，如下所示。

我的问题是我不明白为什么 *ngFor 代码最初会跳过几个空格然后开始打印底部的内部代码以匹配第二列的静态数据。请参阅屏幕截图 1 以便更好地理解。提前谢谢你。（我使用了最新版本的 angular 和 angular material）

Answer 1

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

<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>

Answer 2

问题出在 container 项的 inline-block 项上。 inline-block 的默认 vertical-align 值为 baseline。如果您将两列都设置为 vertical-align: top，它们都将从顶部开始。

https://stackblitz.com/edit/angular-fdkfkz

http://infoheap.com/css-inline-block-baseline-alignment/

注意：如果您使用的是bootstrap，您应该按照@Rick 建议的方式构造它，而不是使用内联样式。

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

*ngFor starts creating html element from bottom

angular

ngfor