MDL 卡未与父级对齐答案

【问题标题】：MDL card doesn't align on top of parentMDL 卡未与父级对齐
【发布时间】：2017-08-29 08:54:09
【问题描述】：

我使用 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 类，因此它应该在父级的顶部对齐，但事实并非如此。有人知道为什么吗？

提前致谢！

【问题讨论】：

您是否使用过mdl-layout 或mdl-grid 组件以及如何使用？您需要显示更多代码，以了解卡片的位置。您可以使用this blank template 发布您的代码（只需添加 html/css）。
@KostasSiabanis 我分叉了你的 mdl 模板：codepen.io/hiabst/pen/YxRXwb

标签： html css material-design material-design-lite

【解决方案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。

【讨论】：