Question

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

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

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

您告诉您的网格图块是正方形

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

因此他们被迫与宽度具有相同的高度。他们实际上并没有重叠＆＃34;但瓷砖本身是切断的，因为它们的高度不足以容纳它们所含的内容。

例如，如果将其更改为md-row-height="2:2.5"，则适合。但只有在您调整浏览器窗口大小并且切片宽度发生变化之前。这也改变了他们的身高。

那个how grid tiles work，它们应该是一个高度相同的网格。因此，最好将内容放入可用高度（可能使用text-overflow: ellipsis;或Ng模块，根据可用空间自动计算文本长度。）

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

1 个答案: