Material Design Lite Raster mit Tabellen

8

Ich experimentiere mit dem kürzlich veröffentlichten MDL-Kit und versuche, das Rasterlayout mit Karten und Tabellen zu verwenden.

Was ich gefunden habe, war, dass das MDL-Gitter nicht so flexibel ist wie das Bootstrap-Gitter für verschachtelte Spalten (wahrscheinlich, weil ich noch nicht genug darüber weiß). In meinem 3-Spalten-Layout verwende ich Karten und Tabellen nebeneinander, um die Daten zu präsentieren, die ich habe.

Aber leider deckt die Karte nicht die gesamte Breite einer Spalte ab, es sei denn, ich width width = 100% manuell an. Aber sobald ich es tue, reagiert der Tisch nicht mehr und überlappt sich mit Karten herum, wenn die Bildschirmgröße abnimmt.

JSFiddle

Kann mir jemand sagen, wie ich dieses Problem los werde?

%Vor%     
Ish 11.07.2015, 17:50
quelle

3 Antworten

8

Mal sehen, ob ich Ihnen bei jedem Problem helfen kann:

Erstens, die Karten nehmen nicht die ganze Spalte ein. Das Problem sind die verschachtelten divs. Wenn Sie die Spalte so machen:

%Vor%

Anstatt die Karte in die Spalte zu legen, wird sie die ganze Spalte einnehmen. Sehen Sie das aktualisierte JSFiddle hier .

Als nächstes müssen Sie für geschachtelte Spalten geschachtelte Gitter haben, wie folgt:

%Vor%

Siehe JSFiddle hier .

Es klingt, als hättest du dein Ziel ein wenig geändert, aber hoffentlich kannst du diese beiden zusammensetzen, um dein Problem zu lösen.

    
Jacob Norton 14.07.2015 16:46
quelle
3

So geht's:

%Vor% %Vor%
    
Ron Royston 17.07.2016 18:50
quelle
0

Damit sich Ihr Tisch an die Größe des Containers anpasst und auf jede Größenänderung reagiert, können Sie das Attribut width auf einen bestimmten Prozentsatz setzen.

%Vor%
    
Gabriel 15.07.2015 02:02
quelle

Tags und Links