如何在Angular 2材质的md-grid-tile中嵌入md-card？

Question

我正在关注https://material.angular.io/components上给出的示例,并尝试将"X"数量的卡放在同一"行"中.为了实现这一点,我在md-grid-tile中嵌套了一张md-card.

以下是我正在做的事情的一个问题https://plnkr.co/edit/S8QkPOT8o34jWCO85S8P?p=preview

如果弄清楚md-grid-tile有一个溢出:隐藏的css规则,如果我把它改成溢出:可见我可以在md-grid-tiles里面看到整个md-card

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

这样可以吗？或者我如何在同一"行"中排列X卡？我应该使用其他方法吗？

谢谢.

Answer 1

您不应该在md-grid-tile或其他任何内容中嵌入md卡.

为了实现这样的设计:

你只需要设置正确的宽度到md卡,默认情况下md-card设置为100%.这是一个使用此css规则在"同一行"上查看两个md卡的探测器https://plnkr.co/edit/R7mhv59gAG6bZRbEuNKe?p=preview:

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