在Angular 2材质的md-grid-list中使用md-cards

时间:2016-08-12 16:22:43

标签: angular css3 angular-material

我是角度2材料设计的新手。我想要实现的是使用angular2材质创建一个网格列表,并将md-cards放在md-grid-tile中。虽然md-card有位置:相对,但它们溢出了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>

非常感谢任何帮助解决这个问题:)

1 个答案:

答案 0 :(得分:2)

根据我的想法,md-grid-tile在另一个名为figure的dom元素中创建,其中一个css规则是align-items: center;。我用过:

md-grid-tile figure {
    align-items: flex-start!important;
}