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

问题描述

我想使它所以我的MD卡电网有根据自己的形象不同的高度。现在如果一个图像是高卡的整个行相匹配的高度，使得一个靠不住的样子。我能做些什么，使里面的卡片内容的＆LT; MD卡＆GT; 不延伸到行匹配

下面是卡的HTML：

 ＆lt;节类=卡NG-IF =观点==='文章'＆GT;
        ＆LT; D​​IV布局=行布局-ALIGN =中心伸展布局包＆GT;
          ＆LT; MD卡NG重复=文章中home.articles |过滤器：searchCard |排序依据：' -  negPos'＆GT;
            ＆LT;一个NG-HREF =/条/ {{article.id}}＆GT;＆LT; IMG NG-SRC ={{article.imagePath}}级=牌形象ALT =文章图像 ＆GT;＆下; / A＆GT;
            ＆LT; D​​IV CLASS =card_content＆GT;
                ＆LT; D​​IV CLASS =article_card_title＆GT;
                    ＆下;一个纳克-HREF =/条/ {{article.id}}＆GT;＆下; H3类=MD-小标题＆GT; {{article.title}}＆下; / H3＆GT;＆下; / A＆GT;
                ＆LT; / DIV＆GT;
                ＆LT; D​​IV CLASS =card_agency＆GT;
                    ＆LT;跨度类=AGENCY_NAME＆GT; {{article.agency}}＆LT; / SPAN＆GT;
                ＆LT; / DIV＆GT;
            ＆LT; / DIV＆GT;
            ＆LT; D​​IV CLASS =card_ratings＆GT;
                ＆LT; D​​IV＆GT;
                ＆所述; IMG SRC ={{article.negPosBar}}＆GT;
                    ＆LT; MD-MD提示方向='底'＆GT;
               ＆LT; / DIV＆GT;
               ＆LT; D​​IV＆GT;
                ＆所述; IMG SRC ={{article.skewBar}}＆GT;
               ＆LT; / DIV＆GT;
              ＆LT; D​​IV＆GT;
                ＆所述; IMG SRC ={{article.contBar}}＆GT;
               ＆LT; / DIV＆GT;
            ＆LT; / DIV＆GT;
          ＆LT; / MD卡＆GT;
          ＆LT; H1类=MD-显示-1NG-秀=（home.articles |过滤器：searchCard）。长度== 0！＆GT;没有结果＆LT; / H1＆GT;
        ＆LT; / DIV＆GT;
    ＆LT; /节＆gt;
 

和CSS的：

  MD-卡{
    宽度：375px;
    边界半径：的3px;
}.card_content {
    填充左：10px的;
    高度：100％;
}
 

解决方案

你有什么是行布局。您将追加每个 MD-卡到同一行。这意味着行根据其最高子会成长的高度，和其他儿童伸展以匹配该高度。你可以有一个 DIV 填补这一高度，然后在 MD-卡只是部分地填补了股利。但是，这将意味着仍然有在第一和第二排的卡之间的空的空间。

另一种方法是使列布局。根据您的图片，你将有三列。现在每个 MD-卡追加到其中一列，其兄弟下方。在此两栏布局看看：

 ＆LT; D​​IV布局=行＆GT;
  ＆LT; D​​IV布局=列柔性=50级=左＆GT;
    ＆LT; MD卡NG重复= NG-IF =$甚至＆GT在home.articles文章;
    ＆LT; / MD卡＆GT;
  ＆LT; / DIV＆GT;
  ＆LT; D​​IV布局=列柔性=50级=右＆GT;
    ＆LT; MD卡NG重复=文章中home.articlesNG-IF =$奇＆GT;
    ＆LT; / MD卡＆GT;
  ＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
 

下面我们使用 $甚至和 $奇从 NG-重复分裂每张卡到左，右。作出该命令是这样的：

  1 2
3 4
5 6
 

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

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%;
}

解决方案

What you have is a row layout. You append each md-card to the same row. This means the row is gonna grow in height according to its tallest child, and other children stretch to match this height. You could have a div filling this height, and then the md-card to fill the div only partially. But this would mean there is still empty space between the cards on the first and the second row.

The other approach is to make a column layout. According to your picture you would have three columns. Now each md-card is appended to one of the columns, below its sibling. Take a look at this two column layout:

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

Here we use the $even and $odd from ng-repeat to split each card to left and right. Making the order look like this:

1 2
3 4
5 6

Of course you would have to figure out how many columns you need with different screen widths.

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