Html Material Design Lite-卡片支持文本在网格内时不随较大卡片扩展
我正在尝试使用MDL构建一个网站。但是,在网格中使用卡片时,当卡片比行中的其他卡片小时,卡片操作不会与底部对齐,如下所示: 看起来,支持文本并没有像我希望的那样扩展,但不确定我是如何做到这一点的。以下是HTML中的相关片段:Html Material Design Lite-卡片支持文本在网格内时不随较大卡片扩展,html,css,material-design,Html,Css,Material Design,我正在尝试使用MDL构建一个网站。但是,在网格中使用卡片时,当卡片比行中的其他卡片小时,卡片操作不会与底部对齐,如下所示: 看起来,支持文本并没有像我希望的那样扩展,但不确定我是如何做到这一点的。以下是HTML中的相关片段: <!-- Content --> <main class="mdl-layout__content"> <div class="mdl-grid"> <!-- Short supporting text
<!-- Content -->
<main class="mdl-layout__content">
<div class="mdl-grid">
<!-- Short supporting text -->
<div class="home-card mdl-cell mdl-cell--4-col mdl-cell--8-col-tablet mdl-card mdl-shadow--2dp">
<div class="mdl-card__title">
<h2 class="mdl-card__title-text">Blog</h2>
</div>
<div class="mdl-card__supporting-text">
A fairly recent addition detailing some of the work done on current projects.
</div>
<div class="mdl-card__actions mdl-card--border">
<a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">Visit Blog</a>
</div>
<div class="mdl-card__menu">
<button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
<i class="material-icons">share</i>
</button>
</div>
</div>
<!-- Long supporting text -->
<div class="home-card mdl-cell mdl-cell--4-col mdl-cell--8-col-tablet mdl-card mdl-shadow--2dp">
<div class="mdl-card__title">
<h2 class="mdl-card__title-text">Blog</h2>
</div>
<div class="mdl-card__supporting-text">
A fairly recent addition detailing some of the work done on current projects.
A fairly recent addition detailing some of the work done on current projects.
</div>
<div class="mdl-card__actions mdl-card--border">
<a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">Visit Blog</a>
</div>
<div class="mdl-card__menu">
<button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
<i class="material-icons">share</i>
</button>
</div>
</div>
</div>
</main>
德普。添加
mdl卡--将扩展到支持文本div是我所需要的
<div class="mdl-card__supporting-text mdl-card--expand">
A fairly recent addition detailing some of the work done on current projects.
</div>
一个相当新的补充,详细说明了当前项目中所做的一些工作。
<div class="mdl-card__supporting-text mdl-card--expand">
A fairly recent addition detailing some of the work done on current projects.
</div>