Question

我试图让它成为我的md-cards网格根据他们的图像有不同的高度。现在，如果一张图像更高，那么整排卡片就会与那个高度相匹配，从而形成一种不稳定的外观。如何才能使<md-card>内的卡片内容不拉伸以匹配行？

以下是卡片的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

您拥有的是行布局。您将每个md-card附加到同一行。这意味着该行将根据其最高的孩子高度增长，其他孩子伸展以匹配此高度。您可以div填充此高度，然后md-card仅填充部分div。但这意味着第一排和第二排的牌之间仍然有空的空间。

另一种方法是制作列布局。根据你的图片你会有三列。现在每个md-card都附加到其兄弟之下的一列中。看看这两个列布局：

<div layout="row">
  <div layout="column" flex="50" class="left">
    <md-card ng-repeat="article in home.articles" ng-if="$even">
    </md-card>
  </div>
  <div layout="column" flex="50" class="right">
    <md-card ng-repeat="article in home.articles" ng-if="$odd">
    </md-card>
  </div>
</div>

我们使用$even中的$odd和ng-repeat将每张卡片左右分开。订单看起来像这样：

1 2
3 4
5 6

当然，您需要确定不同屏幕宽度所需的列数。

Answer 2

我也在处理这个问题！所以，我做的是创建以下结构：

<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 ）每张卡片。正如我所料，结果是每张卡的自动高度行为！

希望这有助于某人！

angular-material md-card动态高度

2 个答案: