角材料 md 卡动态高度 [英] angular-material md-card dynamic height

查看：28
本文介绍了角材料 md 卡动态高度的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在努力使我的 md 卡网格根据它们的图像具有不同的高度.现在，如果一个图像更高，则整行卡片都与该高度相匹配，看起来很不稳定.我该怎么做才能使 <md-card> 中的卡片内容不拉伸以匹配行?

这是卡片的 html:

 
<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="文章图片"></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 class="card_agency"><span class="agency_name">{{article.agency}}</span>

<div class="card_ratings"><div><img src="{{article.negPosBar}}"><md-tooltip md-direction="'bottom'">

<div><img src="{{article.skewBar}}">

<div><img src="{{article.contBar}}">

</md-card><h1 class="md-display-1" ng-show="(home.articles | filter:searchCard).length == 0">没有结果！</h1>

</节>

和CSS:

md-card {宽度:375px；边框半径:3px；}.card_content {padding-left: 10px;高度:100%；}

解决方案

我也有这个问题！所以，我所做的是创建以下结构:

<div layout="column" ng-repeat="itemGroup 中的项目" flex><md-card><!-- 卡片内容在这里...--></md-card></ng-include>

如您所见...我正在为每组卡片创建一行(layout-wrap)，然后我只是绘制一列(flex>) 每张卡.结果，正如我所料，每张卡片都有一个自动高度行为！

希望这对某人有所帮助！

I am trying to make it so my grid of md-cards have different heights depending on their image. Right now if one image is taller the entire row of cards match that height, making for a wonky look. What can I do to make the card content inside the <md-card> not stretch to match the row?

Here is the html for the cards: 

   <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>

And the css:

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

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

解决方案

I have dealing with that too! So, what i did about it was create the following structure:

<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>

As you can see...i'm creating a row (layout-wrap) for each group of cards and then i'm just drawing a column (flex) for every card. The result, as i expected, has been an auto height behavior for each card!

Hope this helps someone!

这篇关于角材料 md 卡动态高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆