有三个问题需要解决。

第一个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网格的X-col/yyy/

看看这个更改后的代码笔

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

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

避免使用演示mdl组件

你所需要做的就是把卡片组件放在一个网格单元里，比如：

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

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

这是代码笔示例：

增加卡片之间的空间

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