将文本长度可变的卡片网格中的按钮对齐（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;
}

这几乎是完美的解决方案，以防任何人也使用Material Design Lite进行网络访问。