Material design lite stretch vertically mdl-cards

Question

如何垂直拉伸 mdl-cards 以使所有内容均匀？我希望 mdl-card__suporting-text 有弹性。

Answer 1

有三个问题需要解决。

前 mdl-cell 个元素已经具有行中 "biggest" 单元格的高度。因此要使卡片的高度相同"make the card to be 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-cell--X-col/yyy/ 来自 mdl grid

看看这个变了codepen

Answer 2

避免演示 mdl 组件

您需要做的就是将卡片组件放入网格单元格中，例如：

<div class="mdl-card-wide mdl-cell mdl-cell--N-col>

mdl网格系统有默认的spaces，所以如果你把一个卡片组件放在一个cell里，卡片会自动采用默认的网格space。

这是代码笔示例：

adding space between cards

<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 演示组件。

Answer 3

您可以在要添加间隔符的位置添加一个空的 <div class="column-expander"></div>，并将此添加到您的 css:

.column-expander {
     flex-grow: 1;
}

Material design lite stretch vertically mdl-cards

Material design lite stretch vertically mdl-cards

html

javascript

css

material-design-lite

避免演示 mdl 组件