使 angular-material 的 md-cards 不重叠

Question

第一张图一切正常

但是如果我把浏览器的宽度调大一点，结果如下：

每个 md-card 与下一个 md-card 重叠并添加 overflow-y。此问题仅针对 xs 分辨率。这是我的 html:

<div ng-view="" flex="" class="ng-scope flex">
    <md-content layout-xs="column" layout="row" class="md-padding ng-scope layout-xs-column layout-row">
        <div layout="column" layout-gt-xs="row" layout-wrap="" infinite-scroll="ctrl.nextArticles()" infinite-scroll-disabled="ctrl.isBusy || ctrl.isEnd" infinite-scroll-distance="1" class="layout-wrap ng-isolate-scope layout-gt-xs-row layout-column">
            <!-- ngRepeat: article in ctrl.articles -->
            <div ng-repeat="article in ctrl.articles" class="post ng-scope flex-xs-100 flex-xl-20 flex-sm-50 flex-md-33 flex-lg-25" flex-xs="100" flex-sm="50" flex-md="33" flex-lg="25" flex-xl="20">
                <md-card>
                    <md-card-header>
                        <md-card-avatar>
                            <img src="/images/sidenav-icons/Bomb.svg">
                        </md-card-avatar>
                        <md-card-header-text>
                            <span class="md-title ng-binding">FakeTitle147</span>
                            <span class="md-subhead ng-binding">FakeRubric3</span>
                        </md-card-header-text>
                    </md-card-header>
                        <img ng-src="/images/test-img.jpg" alt="*ALT*" class="md-card-image" src="/images/test-img.jpg">
                    <md-card-title>
                        <md-card-title-text>
                            <span class="md-headline">Card header</span>
                        </md-card-title-text>
                    </md-card-title>
                    <md-card-content>
                        <p>
                            The titles
                        </p>
                    </md-card-content>
                    <button class="md-button md-ink-ripple" type="button" ng-transclude="" ng-click="ctrl.showArticle(article._id)" aria-label="Button">
                        <span class="ng-scope">Button</span>
                    </button>
                </md-card>

我没有自定义 css（只有背景色）。谢谢你的想法。

Answer 1

问题出在 layout="column"。我刚刚替换了这个：

<div layout="column" layout-gt-xs="row" layout-wrap="" ...

对此：

<div layout="row" layout-wrap="" ...

这个解决方案适合我。

使 angular-material 的 md-cards 不重叠

Make angular-material's md-cards not overlap

css

angularjs

angular-material