对齐具有可变文本长度的卡片网格中的按钮（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 for the Web，这几乎是完美的解决方案。

对齐具有可变文本长度的卡片网格中的按钮（Material Design Lite）

Align buttons in a card grid with variable text length (Material Design Lite)

css

material-design

vertical-alignment

material-design-lite