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
所以应该在父母的顶部对齐,但事实并非如此。 有人知道为什么吗?
提前致谢!
答
布局中的所有三张牌都在同一个'行'中,所以当第一张牌获得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。
+0
它的工作,谢谢! – Hiabst
你使用过'mdl-layout'或'mdl-grid'组件吗?您需要展示更多代码,以了解卡片的位置。您可以使用[此空白模板](https://codepen.io/ksiabani/pen/jLQOXR)发布您的代码(只需添加html/css)。 –
@KostasSiabanis我分叉你的MDDL模板:https://codepen.io/hiabst/pen/YxRXwb – Hiabst