MDL卡不会在父母的顶部对齐

Question

我使用mdl框架来设计我的webapp。

<div class="demo-card-wide mdl-card mdl-shadow--2dp mdl-cell mdl-cell--top mdl-cell--6-col">
...
<div class="demo-card-wide mdl-card mdl-shadow--2dp mdl-cell mdl-cell--top mdl-cell--6-col">
...
<div ng-init="showLmsSwitch()" class="demo-card-wide mdl-card mdl-shadow--2dp mdl-cell  mdl-cell--6-col  mdl-cell--top">
...

这些是图片中显示的三张卡片。

底部的最后一个（steuerung logitech媒体服务器）具有类mdl-cell--top，因此它应该在父级的顶部对齐，但它不会。 谁知道为什么？

提前致谢！

Answer 1

布局中的所有三张卡都在同一行中，所以当第一张卡得到6列（每行可用12张）而第二张得到其他6列时，第三张牌有另外6列，但已被推到下一行。

您必须使用多个mdl-grid组件来实现此布局：

<div class="mdl-grid">
  <div class="mdl-grid mdl-cell--6-col">
    <div class="mdl-cell mdl-cell--12-col">Content</div>
    <div class="mdl-cell mdl-cell--12-col">Content</div>
  </div>
  <div class="mdl-cell--6-col">Content
  </div>
</div>

我更新了您的笔here。