如何在Angular2中的md-grid-list里面修复md-card的高度?

时间:2017-05-09 08:53:04

标签: angular angular-material angular2-directives angular-material2

我正在使用"@angular/material": "2.0.0-beta.2"版本。为了显示图块,我在md-card内使用了md-grid-list。我已将属性rowHeight添加到md-grid-list。即使定义了rowHeight,行中的卡也不是相同的高度。我需要使用什么属性md-card才能为行中的所有卡片设置相同的高度?

<md-grid-list cols="4"  rowHeight="250px" gutterSize="20px">
  <md-grid-tile  *ngFor="let data of myData">
      <md-card [style.background]="'lightblue'">    
    <md-card-title></md-card-title>
    <md-card-title></md-card-title>
    <md-card-content>
    <h2>    
    </h2>
    </md-card-content>  
    </md-card>
  </md-grid-tile>
</md-grid-list>

1 个答案:

答案 0 :(得分:1)

md-card上设置 100% minwidth属性以仅调整高度,并设置md-grid-tile以填充[style.minHeight]="'100%'" [style.minWidth]="'100%'"

像:

{{1}}

例如,请参阅Plunker