如何动态放置卡片并填充空白空间? [英] How to put the cards dynamically and fill the empty spaces?
问题描述
我的目标是做这样的事情,(例如卡片操作按钮")
这是代码,但我不知道如何工作,如果有人知道请告诉我http://codepen.io/TiagoSousa/pen/aNjWqd
codepen 的代码是不同的,它是为每个人而构建的,因为我插入堆栈的代码有指令和其他你不能做的东西
因为 CSS flexbox(即 flex-direction: row
),我认为每一行的卡片从相同的高度开始,而不是当然.一种解决方案是将要显示的项目拆分为左列和右列.看看http://codepen.io/z00bs/pen/XdBgJK(我清理了你的笔……)
My objective is to do something like this, (the example "Card Action Buttons") https://material.angularjs.org/latest/demo/card but dynamically.
<div class="md-padding" layout="row" layout-xs="column" layout-wrap>
<div flex-gt-xs="50" flex-sm="100" class="blue" ng-repeat="match in matches.matchesList">
<md-card md-whiteframe="8">
<md-card-header>
<md-card-avatar>
<md-icon class="md-avatar-icon" ></md-icon>
</md-card-avatar>
<md-card-header-text>
<span class="md-title">Title</span>
<span class="md-subhead">subhead</span>
</md-card-header-text>
</md-card-header>
<md-card-content>
<!-- Directive to show the score board -->
<p>
The titles of Washed Out's breakthrough song and the first single from Paracosm share the
two most important words in Ernest Greene's musical language: feel it. It's a simple request, as well...
</p>
</md-card-content>
</md-card>
</div>
</div>
When the cards have different heights happens this
Here is the code but I dont know how to put to work if someone know please tell me to http://codepen.io/TiagoSousa/pen/aNjWqd
The code of the codepen is different and is build to work on everyone because the code I inserted on stack have directives and other stuff you cannot do
I think the cards on each row start at the same height because of CSS flexbox (namely flex-direction: row
), not sure though. One solution would be to split the items you want to show into a left and a right column. Have a look at http://codepen.io/z00bs/pen/XdBgJK (I cleaned up your pen...).
这篇关于如何动态放置卡片并填充空白空间?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!