Question

我在这里制作了一个简单的代码http://embed.plnkr.co/INpybaat2XZqdStsKAdy/。卡片没有在一行中呈现。如何使它在一行中呈现？谢谢。

Answer 1

在md-card css文件中尝试float: left;。像这样： https://plnkr.co/edit/INpybaat2XZqdStsKAdy?p=preview

Answer 2

您可以使用flexbox作为卡片的容器。

<div id="card-container">
    <md-card class="short">
        <md-card-title-group>
        <img md-card-sm-image src="https://image.freepik.com/free-photo/blue-surface-with-creases_1160-191.jpg">
        <md-card-title>Hi</md-card-title>
        <md-card-subtitle>Have a nice day</md-card-subtitle>
        </md-card-title-group>
    </md-card>
    <md-card>
        <md-card-title-group>
        <img md-card-sm-image src="https://image.freepik.com/free-photo/blue-surface-with-creases_1160-191.jpg">
        <md-card-title>One</md-card-title>
        <md-card-subtitle>Is the first order in numeric</md-card-subtitle>
        </md-card-title-group>
    </md-card>
</div>

和app.component.css

md-card {
max-width: 150px;
margin: 4px;
}

#card-container {
display: flex;
    flex-flow: row wrap;
}

https://plnkr.co/edit/V0pegO?p=preview

Angular 2材料：将卡片放在一行中

2 个答案: