在Angular 2材质的md-grid-list中使用md-cards [英] using md-cards in a md-grid-list in Angular 2 material
问题描述
我是Angle 2材质设计的新手.我要实现的目标是使用angular2材料创建一个网格列表，并将md-cards放置在md-grid-tile中.尽管md卡的位置为:相对，但它们溢出了md-grid-tile. 点击此链接，卡片重叠，并且在md-中溢出了md-grid-tile网格列表
I am new to angular 2 material design. What I am trying to achieve is to create a grid list using angular2 material and place md-cards inside md-grid-tile. Though the md-card have position:relative, they are overflowing the md-grid-tile. click this link, the cards are overlapping and they are overflowing the md-grid-tile in a md-grid-list
以下是我使用的代码:
<body>
<md-toolbar layout="row"> <md-button class="menu">
<md-icon md-svg-icon="menu"></md-icon> </md-button>
<h3>Pipeline UI</h3>
</md-toolbar>
<md-grid-list cols="2" rowHeight="2:1" gutterSize="15px">
<md-grid-tile layout-wrap *ngFor="let item of releaseType">
<md-card flex layout-fill>
<md-card-header>test1</md-card-header>
<md-card-content>
<stage [init]="item.submissions"></stage></md-card-content>
</md-card>
</md-grid-tile>
</md-grid-list>
</body>
任何帮助解决此问题的方法都非常感谢:)
Any help to solve this is extremely appreciated :)
推荐答案
根据我的发现，md-grid-tile在另一个称为figure的dom元素内创建，其css规则之一是align-items: center;.我用过:
From what I figured out,md-grid-tile creates inside another dom element called figure and one of its css rules is align-items: center;. I used:
md-grid-tile figure {
align-items: flex-start!important;
}
这篇关于在Angular 2材质的md-grid-list中使用md-cards的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
