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 媒体服务器）有 class mdl-cell--top，所以它应该在父级的顶部对齐，但它没有。有人知道为什么吗？

提前致谢！

Answer 1

您布局中的所有三张卡片都在相同的 'row' 中，因此当第一张获得 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。

MDL 卡未与父卡对齐

MDL card doesn't align on top of parent

html

css

material-design

material-design-lite