Css 如何在Angular 2材质上的md grid磁贴中嵌套md卡？

我遵循上面给出的示例，并尝试将“X”数量的卡片放在同一行中。为了实现这一点，我在md网格图块中嵌套了一个md卡

这是我正在做的一件事

如果发现md grid磁贴有一个overflow:hidden css规则，如果我将其更改为overflow:visible，我可以在md grid磁贴中看到整个md卡

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

这样行吗？或者我如何在同一“行”中排列X张卡？我应该使用另一种方法吗

---

谢谢。

您不应该将md卡嵌套在md网格磁贴或任何其他磁贴中

要实现这样的设计：

您只需将正确的宽度设置为md卡，默认情况下，md卡设置为100%。 下面是一个使用css规则在“同一行”上查看两张md卡的示例：

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

---

我能够实现它使用嵌套的md卡在md网格瓷砖。问题是.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*/
}

**组件：**
从“@angular/core”导入{Component，OnInit}；
@组成部分({
templateUrl:“./abc.component.html”，
样式URL:['./abc.component.css']
})
导出类AbcComponent实现OnInit{
恩戈尼尼特（）{
}
瓷砖=[
{文本：“一”，列：1，行：1，颜色：“浅蓝色”}，
{text:'Two'，cols:1，rows:1，color:'lightgreen'}，
{文本：'Three'，cols:1，rows:1，颜色：'lightpink'}，
{文本：“四”，列：1，行：1，颜色：'#DDBDF1'}，
{文本：“五”，列：1，行：1，颜色：'#DDBDF1'}，
{文本：'Six'，列数：1，行数：1，颜色：'#DDBDF1'}，
];
}
**abc.component.html文件内容：**
你好
**abc.component.css文件内容：**
.方格板{
利润率：10px；
宽度：100%；
}
：：ng deep md-grid-tile.mat-grid-tile.mat图{
对齐项目：初始；/*垂直对齐*/
}

结果如下：

---

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

谢谢。到处寻找如何做到这一点。这应该被标记为答案！检查这个答案，也许会有帮助。