css - 为什么这些卡片无法正常显示？

Question

我在 Material 网格中使用 Angular Material 的卡片。我有这段代码:

http://codepen.io/anon/pen/YWwwvZ .

问题:顶行图像在顶部离开屏幕，底行与顶行部分重叠。我希望所有卡片都不会被其他卡片覆盖，或者离开屏幕。我怎么做？对于奖励积分，如何删除第二个滚动条？

angular.module('MyApp', ['ngMaterial', 'ngMessages', 'material.svgAssetsCache'])

.controller('AppCtrl', function($scope) {
  $scope.imagePath = 'https://material.angularjs.org/latest/img/washedout.png';
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-route.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-114/svg-assets-cache.js"></script>
<script src="https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.0-rc.5/angular-material.js"></script>

<link href="https://material.angularjs.org/1.1.0-rc.5/docs.css" rel="stylesheet" />
<link href="https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.0-rc.5/angular-material.css" rel="stylesheet" />

<div ng-controller="AppCtrl" ng-cloak="" class="carddemoCardActionButtons" ng-app="MyApp">
  <md-content layout-xs="column" layout="row">
    <md-grid-list class="md-padding" flex ng-cloak md-cols-xs="1" md-cols-sm="2" md-cols-md="4" md-cols-gt-md="6" md-row-height-gt-md="1:1" md-row-height="2:2" md-gutter="24px" md-gutter-gt-sm="24px">

      <md-grid-tile ng-repeat="x in [1,2,3,4,5,6,7,8,9,10,11]">
        <md-card>
          <img ng-src="{{imagePath}}" class="md-card-image" alt="Washed Ou">
          <md-card-title>
            <md-card-title-text>
              <span class="md-headline">Icon action buttons</span>
            </md-card-title-text>
          </md-card-title>
          <md-card-content>
            <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-actions layout="row" layout-align="end center">
            <md-button class="md-icon-button" aria-label="Favorite">
              <md-icon md-svg-icon="img/icons/favorite.svg"></md-icon>
            </md-button>
            <md-button class="md-icon-button" aria-label="Settings">
              <md-icon md-svg-icon="img/icons/menu.svg"></md-icon>
            </md-button>
            <md-button class="md-icon-button" aria-label="Share">
              <md-icon md-svg-icon="img/icons/share-arrow.svg"></md-icon>
            </md-button>
          </md-card-actions>
        </md-card>
      </md-grid-tile>
    </md-grid-list>

  </md-content>
</div>

<!--
Copyright 2016 Google Inc. All Rights Reserved. 
Use of this source code is governed by an MIT-style license that can be in foundin the LICENSE file at http://material.angularjs.org/license.
-->

Answer 1

你告诉你的网格 block 是正方形

<md-grid-list ... md-row-height="2:2">

因此它们被迫具有与宽度相同的高度。它们实际上并没有“重叠”，但图 block 本身被切断了，因为它们的高度不足以容纳其中包含的内容。

例如，如果将其更改为 md-row-height="2:2.5"，它就适合。但直到您调整浏览器窗口的大小并且图 block 的宽度发生变化。这也会改变他们的高度。

那是 how grid tiles work ，它们应该是所有高度相同的网格。因此，最好是让您的内容适合可用高度(可能使用 text-overflow: ellipsis; 或根据可用空间自动计算文本长度的 Ng 模块)。