html - 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 .