如何垂直拉伸mdl卡片,使所有内容都均匀分布?我希望mdl-card__suporting-text
被拉伸。
如何垂直拉伸mdl卡片,使所有内容都均匀分布?我希望mdl-card__suporting-text
被拉伸。
需要解决三个问题。
首先,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;
}
第三个问题:
现在最大的汽车的内容和动作重叠了,这是一个讨厌的问题。只有一个简单的解决方案(据我所知),如果您知道操作的高度。然后向卡片添加padding-bottom
。
.demo-card-wide.mdl-card {
/* ... */
padding-bottom: 50px;
}
还有一个建议:尽量避免卡片的固定宽度。最好使用来自mdl网格的 mdl-cell--X-col/yyy/。
看看这个更改后的codepen
<div class="column-expander"></div>
,然后将以下内容添加到您的CSS中:.column-expander {
flex-grow: 1;
}
你只需要把卡片组件放到 grid 格子里面,就像这样:
<div class="mdl-card-wide mdl-cell mdl-cell--N-col>
mdl网格系统具有默认间距,因此如果您将卡片组件放置在单元格内,则卡片将自动采用默认网格间距。
这是codepen示例:
<div class="mdl-grid">
<div class="mdl-cell mdl-cell--4-col mdl-cell--4-col-phone mdl-shadow--4dp">
<div class="mdl-grid mdl-grid--no-spacing">
<div class="mdl-cell mdl-cell--6-col green">
</div>
<div class="mdl-card-wide mdl-cell mdl-cell--6-col mdl-shadow">
<div class="mdl-card__supporting-text">
<h4>Tablet</h4>
<p>Ni un solo pixel desaprovechado, el contenido de tu pagina se ajusta a todo.</p>
</div>
</div>
</div>
</div>
<div class="mdl-cell mdl-cell--4-col mdl-cell--4-col-phone mdl-shadow--4dp">
<div class="mdl-grid mdl-grid--no-spacing">
<div class="mdl-cell mdl-cell--6-col green">
</div>
<div class="mdl-card-wide mdl-cell mdl-cell--6-col mdl-shadow">
<div class="mdl-card__supporting-text">
<h4>Tablet</h4>
<p>Ni un solo pixel desaprovechado, el contenido de tu pagina se ajusta a todo.</p>
</div>
</div>
</div>
</div>
<div class="mdl-cell mdl-cell--4-col mdl-cell--4-col-phone mdl-shadow--4dp">
<div class="mdl-grid mdl-grid--no-spacing">
<div class="mdl-cell mdl-cell--6-col green">
</div>
<div class="mdl-card-wide mdl-cell mdl-cell--6-col mdl-shadow">
<div class="mdl-card__supporting-text">
<h4>Tablet</h4>
<p>Ni un solo pixel desaprovechado, el contenido de tu pagina se ajusta a todo.</p>
</div>
</div>
</div>
</div>
</div>
还要记住,卡片组件可以是正方形或宽的,但如果将卡片放在单元格中,则无需编写正方形或宽的代码。
同时避免使用mdl演示组件。