javascript - Material design lite 垂直拉伸(stretch) mdl-cards

Question

我如何垂直拉伸(stretch) mdl-cards 以便一切都均匀？我希望 mdl-card__suporting-text 具有 flex 。

这是一个例子 http://codepen.io/anon/pen/grGbdb

Answer 1

需要解决三个问题。

第一个 mdl-cell 元素已经具有行中“最大”单元格的高度。 因此要使卡片具有相同的高度“使卡片成为单元格”。

<div class="mdl-cell mdl-card mdl-shadow--2dp demo-card-wide">
//...
</div>

下一个问题是 mdl-card__actions 不在卡片的底部。
要更改此设置，请将操作定位为绝对位置并将其移至底部。

.demo-card-wide > .mdl-card__actions {
  position: absolute;
  bottom: 0px;
}

第三个问题:
现在最大的汽车的内容和 Action 是重叠的。这是最讨厌的。如果您知道 Action 的高度，那么只有一个简单的解决方案(据我所知)。然后向卡片添加一个 padding-bottom。

.demo-card-wide.mdl-card {
  /* ... */
  padding-bottom: 50px;
}

还有一条评论:尽量避免卡的固定宽度。更好地使用: mdl-cell--X-col/yyy/来自 mdl grid

看看这个变了codepen