CSS: Inline alle Elemente, die in die erste Zeile passen, Zeilenumbruch nach jedem nächsten Element

keine JavaScript- und keine Bildschirmbreiten-Medienabfragen

Ich versuche, einen css-only Weg zu finden, um die Situation zu erreichen, die im unteren Bild dargestellt ist. Ich konnte keinen Weg finden, Folgendes zu erstellen:

• eine Reihe von Blöcken (Inline-Blöcke oder Floated-Blöcke) mit variabler Breite, die mit float rechts von der Linie ausgerichtet sind: right oder right text align
• Elemente, die nicht auf die Linie passen, wrap zur nächsten Zeile. Alle Elemente nach der ersten Zeile haben eine eigene Zeile.

Ich habe mit mehreren Strategien experimentiert, ohne Erfolg, ich habe das Gefühl, dass flexbox helfen könnte, aber ich bin nicht sehr erfahren mit flexbox und konnte keinen Weg finden, es zu benutzen.

Ein paar Dinge, die ich versucht habe:

1. versuche, den Inhalt der Elemente in ein Pseudoelement vor: pseudo einzutragen, indem du content: attr (Dateninhalt) verwendest. Das Element selbst hätte keine Breite. In der nächsten Zeile würde ein linkes Floating-Element mit einer Breite von 99,9% sein, das jedes Element in einer nächsten Zeile verschiebt. Das Problem dabei ist, dass die Elemente in der ersten Zeile ihre normale Breite beibehalten sollten und ich habe keinen Weg gefunden, dies zu tun. Der Pseudo-Selektor der ersten Zeile ist auf Wörter in der Zeile beschränkt und funktioniert nicht für Inline-Container in der Zeile
2. Alternative zur obigen Methode: füge auch hinzu: nach Pseudo-Elementen, die absolut positioniert sind und den gleichen Inhalt wie die: befores haben. Die: before-Elemente würden nur in der ersten Zeile angezeigt und nicht umgebrochen, die: after-Elemente würden die vertikale Liste auf der rechten Seite bilden. Auch auf diese Weise bin ich in eine Sackgasse geraten.

UPDATE: Ich habe eine (weniger) Geige gemacht, die funktioniert, wenn die Breiten der Elemente fest und gleich sind. Leider feste Breite, also noch nicht was ich erreichen möchte. Wenn du mir helfen willst, könntest du das vielleicht als Ausgangspunkt benutzen. Ich habe den Inhalt in a: vorher könnte es vielleicht das Element überlaufen und irgendwie die Elementbreite auf auto fixieren.

zur Zeit nur CHROME: Ссылка

html:

weniger:

LINK ZUR ANTWORT: Ссылка funktioniert nicht im Internet Explorer, aber ich nehme an, dass es in Edge funktioniert. Wenn jemand einen Weg finden kann, um es im IE zu arbeiten, werde ich sehr daran interessiert sein zu wissen