如何在Angular 2 Material上的md-grid-tile中嵌入md-card？

Question

我按照https://material.angular.io/components上给出的示例，尝试将＆＃34; X＆＃34;相同＆＃34;行＆＃34;中的卡数量。为了实现这一点，我在md-grid-tile中嵌套了一张md-card。

以下是我正在做的https://plnkr.co/edit/S8QkPOT8o34jWCO85S8P?p=preview

的内容

如果发现md-grid-tile有溢出：隐藏的css规则，如果我将其更改为溢出：可见我可以在md-grid-tile中看到整个md-card

md-grid-tile {
    display: block;
    position: absolute;
    overflow: visible;
}

这样可以吗？或者我如何在相同的＆＃34;行＆＃34;？中安排X卡片？我应该使用其他方法吗？

感谢。

Answer 1

你不应该在md-grid-tile或其他任何内容中嵌入md-card。

要实现这样的设计：

您只需将正确的宽度设置为md-card，默认情况下md-card设置为100％。 这是一个吸引人https://plnkr.co/edit/R7mhv59gAG6bZRbEuNKe?p=preview，可以在＆＃34;同一行＆＃34;上看到两张md-card;使用这个css规则：

.example-card {
    display: inline-block;
    width: 30%;
    margin: 20px;
    vertical-align: top;
    cursor: pointer;
}

Answer 2

我能够在md-grid-tile中使用嵌套的md-card实现它。问题是.mat-figure的属性“align-items：center”。     这是我的解决方案：

**Component:**

import { Component, OnInit } from '@angular/core';

@Component({
  templateUrl: './abc.component.html',
  styleUrls: ['./abc.component.css']
})
export class AbcComponent implements OnInit {
  ngOnInit() {

  }

  tiles = [
    {text: 'One', cols: 1, rows: 1, color: 'lightblue'},
    {text: 'Two', cols: 1, rows: 1, color: 'lightgreen'},
    {text: 'Three', cols: 1, rows: 1, color: 'lightpink'},
    {text: 'Four', cols: 1, rows: 1, color: '#DDBDF1'},
    {text: 'Five', cols: 1, rows: 1, color: '#DDBDF1'},
    {text: 'Six', cols: 1, rows: 1, color: '#DDBDF1'},
  ];

}

**abc.component.html file content:**

<md-grid-list cols="3">
  <md-grid-tile
      *ngFor="let tile of tiles"
      [colspan]="tile.cols"
      [rowspan]="tile.rows"
      [style.background]="tile.color">

    <md-card class="square_board">HI</md-card>
  </md-grid-tile>
</md-grid-list>

**abc.component.css file content:**

.square_board{
  margin: 10px;
  width: 100%;
}

::ng-deep md-grid-tile.mat-grid-tile .mat-figure {
    align-items: initial;  /*vertical alignment*/
}

结果如下：

这种方法的好处是我们不必关心卡片的间距和位置。