Блог

Главная - Вопросы по программированию - Угловые карточки материалов внутри правильно выровненных разделов должны быть одинаковой высоты

Угловые карточки материалов внутри правильно выровненных разделов должны быть одинаковой высоты

#css #material-design #angular-material

#css #материал-дизайн #angular-material

Вопрос:

Моя проблема в том, что я хочу каким-то образом установить высоту карточек равной, поэтому независимо от длины текста на карточке другие карточки с меньшим количеством текста будут растягиваться на ту же высоту, что и самая большая карта. Я вкладываю md-card внутри повторяющегося div, потому что я устанавливаю заполнение в div, а затем md-card они разделяются пробелом между ними, как я хочу. Но не одинаковой высоты.

Другой вариант — удалить md-card элемент и установить белую рамку для повторяющихся разделов, но тогда у меня не будет места между полями с белой рамкой.

Вот URL-адрес 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>

Ответ №1:

Я бы предложил использовать md-grid-list для этой проблемы — Plunker

Разметка

   <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;
}

Документы

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

Демонстрации

https://material.angularjs.org/latest/demo/gridList

Комментарии:

1. Хорошо, что это сработало, добавив некоторое дополнение к тегам h3, а теги p, я думаю, не нарушат «равную высоту карт»