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卡不會在父級頂部對齊

回答

相關問題