角材料md卡动态高度

我想让它，所以我的网卡md卡有不同的高度取决于他们的形象。现在，如果一张图像比较高，整排卡片就会与这个高度相匹配，从而形成一种won look的外观。我能做些什么来使<md-card>内的卡片内容不能与行匹配？角材料md卡动态高度

下面是卡的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%; 
}

来源

2016-04-13 Jess Anastasio

可能为图像设置了固定高度？ – sdfacre

你有什么是行布局。您将每个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

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

来源

2016-04-14 03:44:16

我也处理过！所以，我做这件事是创建如下结构：每个组的卡

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

正如你可以看到... ...我创建一个行（布局包裹）然后我只需为每张卡片画一列（flex）。正如我所预料的那样，结果是每张卡片的自动高度行为！

希望这可以帮助别人！

来源

2017-03-26 18:46:06 Unbekannt

角材料md卡动态高度

回答

相关问题