Совместите кнопки в сетке карты с переменной длиной текста (Material Design Lite) - PullRequest
Новая
       22

Совместите кнопки в сетке карты с переменной длиной текста (Material Design Lite)

0 голосов
/ 05 января 2019

Мне нужна помощь в понимании потока, я еще не полностью разбираюсь в веб-дизайне. Это мое портфолио, и я пытаюсь создать сетку с компонентами Material Design Lite, я значительно урезал таблицу стилей Google, так что размер файла теперь намного меньше.

Мне бы хотелось, чтобы каждая карточка имела одинаковую высоту для изображения, текста, заголовка и кнопки, чтобы все они выглядели выровненными в сетке.

Лучшее решение, которое у меня есть, и в настоящее время используется макет, это установка встроенной сетки отображения и попытка поиграть со значениями. Я действительно мог бы использовать руку.

Тестируемый пример: https://jjba.ddnsking.com

Структура карты примерно такая: 

<div class='mdl-cell mdl-card mdl-shadow--8dp portfolio-card'>
  <div class='mdl-card__media'>
    <img>
  </div>
  <div class='mdl-card__title'>
    <h2 class='mdl-card__title-text'></h2>
  </div>
  <div class='mdl-card__supporting-text trn'></div>

  <div class='moreButton'>
    <a class='glowingSmall trn' aria-label="Read More" target='blank'>read-more</a>
  </div>
</div>

Иногда заголовки не совпадают:

enter image description here

Иногда кнопки не совпадают:

enter image description here

1 Ответ

0 голосов
/ 05 января 2019

Хорошо, так что ответ на проблему: 

.mdl-cell{
  align-content: flex-end;
  box-sizing: border-box;
}

Это почти идеальное решение, если кто-то также использует Material Design Lite для Интернета.

...