Question

我的问题是我想以某种方式将卡片的高度设置为相等，因此无论卡片的文本有多长，其他具有较少文本的卡片都会拉伸到与最大卡片相同的高度。我在重复的div中嵌套md-card，因为我将填充设置为div，然后md-card与它们之间的空格分开，就像我想要的那样。但不是同等高度。

另一个选项是删除md-card元素并将白框设置为重复的div，但之后我不会在白框框之间留出空格。

以下是plunker网址：http://plnkr.co/edit/NDdYvHhuvhTie2Sy9Mg5?p=preview

这是html：

    <!DOCTYPE html>
<html lang="en" >
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- Angular Material style sheet -->
  <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css">
  <style>
    .category-card md-card img{
    width: 100%;
    height:auto;
    padding: 0;
  }
  .category-card md-card h3{
      -webkit-margin-before: 5px;
      -webkit-margin-after: 5px;
  }
  .category-card md-card p{
      font-size: 1.1em;
      word-wrap: break-word;
  }
  </style>

</head>
<body ng-app="BlankApp" ng-cloak>
  <section layout-padding>
    <div layout="row" layout-wrap class="category-wrapper">
        <div flex-xl="25"
             flex-lg="33"
             flex-md="50"
             flex-sm="50"
             flex-xs="100"
             layout-padding
             class="category-card"
             ng-repeat="category in [{text:'Heloooooooooooooooooooooooooooooo'},
             {text:'Heloooooooooooooooooooooooooooooo'},
             {text:'Heloooooooooooooooooooooooooooooo'},
             {text:'BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB'}]">

                <md-card ui-sref="....">
                <img src="http://graywolfseo.com/wp-content/uploads/choosing-urls.jpg" class="md-card-image" alt="{{category.category_image_alt}}">
                <md-card-title>
                    <md-card-title-text>
                        <h3 class="md-headline">TEXTTTTTTTTTTT</h3>
                    </md-card-title-text>
                </md-card-title>
                <md-card-content>
                    <p>
                        {{category.text}}
                    </p>
                </md-card-content>
                </md-card>
        </div>
    </div>
</section>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>

  <!-- Angular Material Library -->
  <script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script>

  <!-- Your application bootstrap  -->
  <script type="text/javascript">    
    /**
     * You must include the dependency on 'ngMaterial' 
     */
    angular.module('BlankApp', ['ngMaterial']);
  </script>

</body>
</html>

Answer 1

我建议您使用md-grid-list来解决此问题 - boolean-indexing

标记

  <md-grid-list
    md-cols-xl="4"
    md-cols-lg="3"
    md-cols-md="2"
    md-cols-sm="2"
    md-cols-xs="1"
    md-row-height="1:1"
    md-gutter="20">
    <md-grid-tile ng-repeat="category in [{text:'Heloooooooooooooooooooooooooooooo'},
             {text:'Heloooooooooooooooooooooooooooooo'},
             {text:'Heloooooooooooooooooooooooooooooo'},
             {text:'BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB'}]">
      <md-card ui-sref="...." layout-fill>
        <img src="http://graywolfseo.com/wp-content/uploads/choosing-urls.jpg" class="md-card-image" alt="{{category.category_image_alt}}">
        <md-card-title>
            <md-card-title-text>
                <h3 class="md-headline">TEXTTTTTTTTTTT</h3>
            </md-card-title-text>
        </md-card-title>
        <md-card-content>
            <p>
                {{category.text}}
            </p>
        </md-card-content>
      </md-card>
    </md-grid-tile>
  </md-grid-list>

CSS

p {
  word-break: break-all;
}

文档

Plunker https://material.angularjs.org/latest/api/directive/mdGridList

演示

https://material.angularjs.org/latest/api/directive/mdGridTile

正确对齐的div内的Angular Material卡必须具有相同的高度

1 个答案: