MDL卡不会在父级顶部对齐

我使用mdl框架来设计我的Web应用程序。MDL卡不会在父级顶部对齐

<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罗技媒体服务器）上的最后一个具有类mdl-cell--top所以应该在父母的顶部对齐，但事实并非如此。有人知道为什么吗？

提前致谢！

来源

2017-08-29 Hiabst

你使用过'mdl-layout'或'mdl-grid'组件吗？您需要展示更多代码，以了解卡片的位置。您可以使用[此空白模板]（https://codepen.io/ksiabani/pen/jLQOXR）发布您的代码（只需添加html/css）。 –

@KostasSiabanis我分叉你的MDDL模板：https://codepen.io/hiabst/pen/YxRXwb – Hiabst

布局中的所有三张牌都在同一个'行'中，所以当第一张牌获得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。

来源

2017-08-29 11:45:14

它的工作，谢谢！ – Hiabst

MDL卡不会在父级顶部对齐

回答

相关问题