角材料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卡動態高度

回答

相關問題