如何把卡动态和填补的空白？ [英] How to put the cards dynamically and fill the empty spaces?

问题描述

我的目标是做这样的事情，（示例中的卡动作按钮）的https： //material.angularjs.org/latest/demo/card 但动态。

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

下面是code，但我不知道如何把如果有人知道的工作，请告诉我的的http：//$c$cpen.io/TiagoSousa/pen/aNjWqd

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

在codePEN的code是不同的，是建立在每个人的工作，因为code我插在堆有指令和其他的东西，你不能这样做。

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

推荐答案

我觉得每一行的卡在因为CSS Flexbox的（同样的高度开始即柔性方向：行），不知道虽然。一个解决办法是分割要显示成左和右列中的项目。看看的http：//$c$cpen.io/z00bs/pen/XdBgJK （我清理你的笔......）。

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