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

问题描述

我想让它的网格md卡有不同的高度，取决于他们的形象。现在如果一个图像更高的整行卡匹配那个高度，使一个.ky的外观。我可以做些什么来使< md-card> 里面的卡片内容不匹配该行吗？

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?

这里是卡的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%;
}

推荐答案

布局。您将每个 md-card 附加到同一行。这意味着该行将根据其最高的孩子在高度上增长，并且其他孩子伸展以匹配此高度。你可以有一个 div 填充这个高度，然后 md-card 只填充div。但这意味着第一行和第二行上的卡之间仍然有空的空间。

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.

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

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>

这里我们使用 $ even code> $ 从 ng-repeat 将每张卡片左右分割。订单如下所示：

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