Wrap horizontal basierend auf der Höhe?
Ich verwende layout horizontal wrap , um einige Elemente basierend auf ihrer Größe und dem Container zu finden. Diese Gegenstände haben verschiedene Größen, manchmal verliere ich viel Platz unter ihnen.
Besser, wenn ich dir eine Skizze mit der Situation zeige ...
Mein relevanter Code sieht so aus:
%Vor%Diese Elemente sind sortierbar, so dass der Benutzer sie verschieben kann. Eine Lösung mit festen Positionen ist nicht möglich.
Ist es möglich, es mit Polymer-Schatten zu lösen? Irgendeine Idee?
Ich habe pnnkr gemacht, wo du es reproduzieren kannst
Aktualisieren
Da ich einige Vorschläge für die Verwendung von float bekommen habe und ich einige Schwierigkeiten habe, das Problem, das ich damit habe, zu erklären, füge ich eine neue Skizze hinzu, um ein mögliches Ziel zu zeigen. Beachten Sie, wie der Benutzer die kleinen Gegenstände auf beiden Seiten des großen bewegen könnte.
2 Antworten
Dieses CSS lässt das Design wie Ihr Drahtmodell aussehen:
%Vor%Aktualisierung:
%Vor% 
Vielleicht wird das helfen.
Wenn die Höhen der Elemente dynamisch sind, funktionieren Floats nicht immer so, wie Sie gesehen haben, aber wenn Sie sagen können, dass die Breiten gleich bleiben, können Sie ein wenig JS hinzufügen, um Elemente nach oben zu verschieben, um eine gute Anpassung zu erreichen / p>
Hier ist ein js-Bin, um das Ergebnis Ссылка
anzuzeigenin diesem Sinne habe ich eine Weile zurück die js ist in eckigen eingewickelt
Sie durchlaufen im Grunde die Elemente, die sie in Spalten nach ihrem linken Pixelwert gruppieren
%Vor%Die Höhe der Spalte wird gespeichert, jedes Mal, wenn Sie ein Element hinzufügen, erhöhen Sie die Spaltenhöhe um die Höhe der Elemente
%Vor%und das Element wird nach oben verschoben, indem der Rand gesetzt wird, der die Lücke schließt
%Vor%Sie können dies nur mit JS und CSS
machenübrigens. Ich bin mir nicht sicher, css flex würde hier helfen, da Ihre Elemente im selben Container sein müssen
Tags und Links html css polymer flexbox polymer-1.0