MDLカードが親の上に整列しない

Question

私はwebappを設計するために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"> 
... 

これらは、画像に表示される3枚のカードです。

下（steuerungロジクールメディアサーバー）上の最後のものはそう、それは親の上に揃える必要がありますが、そうでないクラスmdl-cell--topを持っています。 なぜ誰も知っていますか？

ありがとうございます！

Answer 1

レイアウト内の3枚のカードはすべて同じ '行'にあります。したがって、最初のカードが6行（各行の12個のカードのうち12個のカード）を獲得し、2番目のカードが残りの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を更新しました。