angular-material md-card 动态高度

Posted 2023-03-05

【中文标题】angular-material md-card 动态高度

【英文标题】：angular-material md-card dynamic height

【发布时间】：2016-08-03 22:08:26

【问题描述】：

我正在努力使我的 md 卡网格根据其图像具有不同的高度。现在，如果一个图像更高，则整行卡片都与该高度匹配，从而产生不稳定的外观。我该怎么做才能使<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" ></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%;

【问题讨论】：

可能为图片设置了一个固定的高度？

【参考方案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>

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

1 2
3 4
5 6

当然，您必须弄清楚不同屏幕宽度需要多少列。

【参考方案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) 对于每张卡。结果，正如我所料，每张卡片都有一个自动高度行为！

希望这对某人有所帮助！