MDL-Karte ist nicht auf der Oberseite der Eltern ausgerichtet

Question

Ich benutze das MDL-Framework für die Gestaltung meiner 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"> 
... 

Dies sind die drei Karten, die im Bild angezeigt werden.

die letzte auf der Unterseite (Steuerung Logitech Media Servers) die Klasse mdl-cell--top so sollte es auf der Oberseite der Mutter auszurichten, aber es funktioniert nicht. Weiß jemand warum?

Vielen Dank im Voraus!

Answer 1

Alle drei Karten in Ihrem Layout befinden sich in der gleichen 'Reihe'. Wenn also die erste 6 Spalten erhält (die verfügbaren 12 jeder Reihe) und die zweite die anderen 6 Spalten, bekommt Ihre dritte Karte eine andere 6 Spalten wurde aber schon in die nächste Reihe geschoben.

Sie müssen mehrere mdl-grid Komponenten dieses Layout zu erreichen:

<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> 

ich Ihren Stift here aktualisiert haben.