
本文介绍了角材料 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 卡动态高度的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!
08-20 12:59