html - Angular Material MD 卡动态高度

Question

我正在尝试使我的 MD 卡网格根据其图像具有不同的高度。现在，如果一张图像更高，则整排卡片都会匹配该高度，从而产生一种不稳定的外观。我该怎么做才能使卡片内容在 <md-card> 内不拉伸(stretch)以匹配行？

这是卡片的 html:

   <section class="cards" ng-if="view === 'Articles'">
        <div layout="row" layout-align="center stretch" layout-wrap>
          <md-card ng-repeat="article in home.articles | filter:searchCard | orderBy:'-negPos'">
            <a ng-href="/article/{{article.id}}"><img ng-src="{{article.imagePath}}" class="card-image" alt="Article image"></a>
            <div class="card_content">
                <div class="article_card_title">
                    <a ng-href="/article/{{article.id}}"><h3 class="md-subhead">{{article.title}}</h3></a>
                </div>
                <div class="card_agency">
                    <span class="agency_name">{{article.agency}}</span>
                </div>
            </div>
            <div class="card_ratings">
                <div>
                <img src="{{article.negPosBar}}">
                    <md-tooltip md-direction="'bottom'">
               </div>
               <div>
                <img src="{{article.skewBar}}">         
               </div>
              <div>
                <img src="{{article.contBar}}">
               </div>
            </div>
          </md-card>
          <h1 class="md-display-1" ng-show="(home.articles | filter:searchCard).length == 0">No results!</h1>
        </div>
    </section>

还有CSS:

md-card {
    width: 375px;
    border-radius: 3px;
}

.card_content {
    padding-left: 10px;
    height: 100%;
}

Answer 1

我也正在处理这个问题!因此，我所做的是创建以下结构:

<div layout="row" ng-repeat="itemGroup in itemCollection" layout-wrap>
    <div layout="column"  ng-repeat="item in itemGroup" flex>
        <md-card>
             <!-- card content here... -->
        </md-card>  
    </ng-include> 
</div>

如您所见...我正在为每组卡片创建一行(layout-wrap)，然后我只是绘制一列(flex) >) 每张卡。正如我所期望的，结果是每张卡的自动高度行为!

希望这对某人有帮助!