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

I want to create something like a trello board. For that I wrote 2 columns with style as width = 20% and display = inline block. In one column I have used *ngFor for printing dynamic elements and in other column i have written <mat-list-item></mat-list-item> for multiple cards. Please find the code and screenshot below.enter image description here

And Please find the code from app.component.ts as below. enter image description here

我的问题是我不明白为什么* ngFor代码最初会跳过几个空格,然后开始在底部打印内部代码以匹配第二列中的静态数据。请参阅屏幕截图1以获得更好的理解。预先谢谢您。(我使用了最新版的角钢和角钢)

评论
  • paut
    paut 回复

    The issue is with the inline-block of the container items. The default vertical-align value for inline-block is baseline. If you set both columns to vertical-align: top they will both start from the top.

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

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

    注意:如果使用的是引导程序,则可能应该按照@Rick的建议来构造它,而不要进行内联样式。

  • G小调
    G小调 回复

    我认为您可能要使用以下格式:

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