css - 对齐具有可变文本长度的卡片网格中的按钮(Material Design Lite)

Question

我需要帮助来理解这里的流程，我还没有完全熟悉网页设计。这是我的作品集，我正在尝试使用 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>

有时标题不对齐:

有时按钮不对齐:

Answer 1

好的，所以问题的答案是:

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

如果有人也在使用 Web 版 Material Design Lite，这几乎是完美的解决方案。