angular - Angular 2材料：在一条线上制作卡片

Question

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

Answer 1

float: left;在 md-card css 文件中尝试。像这样： 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