这是我的 MD 卡的循环(除了第一个 div
):
<div layout="column" layout-gt-sm="row" layout-wrap="">
<div flex="25" flex-gt-sm="50">
<md-card>
<md-card-header>
<md-card-avatar><img src="#" />
</md-card-avatar>
<md-card-header-text>
<span class="md-title">Angular</span>
<span class="md-subhead">Material</span>
</md-card-header-text>
</md-card-header>
<img ng-src="{{imagePath}}" alt="Washed Out" class="md-card-image" />
<md-card-title>
<md-card-title-text>
<span class="md-headline">Text</span>
</md-card-title-text>
</md-card-title>
<md-card-content>
<p>
Content
</p>
</md-card-content>
<md-button>Button</md-button>
</md-card>
</div>
<!-- another card -->
</div>
最佳答案
这种布局需要您使用一些 JavaScript 来添加 View 逻辑。由于您的每张卡片都使用行,因此当前无法执行该样式。 我会查看http://masonry.desandro.com/
关于css - 通过有 Angular Material 的不同高度的 md 卡的响应网格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37398543/