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 media server)有类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。