Ich habe Zeilen mit Text und Daten.

Das Textfeld muss links ausgerichtet sein und der Text muss links ausgerichtet sein. Das Zahlenfeld muss rechtsbündig und der Text rechtsbündig sein.

Sie sollten nebeneinander vorhanden sein, es sei denn, der Name ist zu lang. In diesem Fall wird das Zahlenfeld innerhalb der Zeile umbrochen. Alle Zahlen in der Reihe sollten zusammengepackt werden. Jeder Name hat in jeder Zeile eine andere Länge.

Wenn das Zahlenfeld umgebrochen wird, muss sich der äußere Behälter vertikal ausdehnen, da sich darunter ein Rand befindet, der unter der Zahl bleiben muss, und die nächste Zeile einen oberen Rand hat, der nach unten gedrückt werden muss.

Die 2 Zahlenspalten in jeder Zeile müssen in allen Zeilen vertikal ausgerichtet sein.

Da es viele Zeilen gibt, Hunderte davon, sollte redundantes Markup minimiert werden, um die Renderzeiten kurz zu halten.

Was ich versucht habe:

Ich habe versucht, Float zu verwenden, aber Float löst die Bindung des Div vom übergeordneten Container und führt nicht dazu, dass sich die übergeordnete Box beim Umbrechen vertikal ausdehnt.

Ich habe versucht, eine Position von rechts:0px zu verwenden, aber das Zahlenfeld wird nicht umbrochen.

Ich habe es mit Flex versucht, aber die Zahlen stimmen nicht mehr mit den anderen Zeilen überein, da jeder Text und jede Zahl in jeder Zeile eine andere Länge hat.

HTML

    
  
 
 
 
 
short name
 
 
000 xx
 
000 %
 
 
 
 
long name long name long name
 
 
000 xx
 
0 %
 
 
 
  

CSS

.container { width: 300px; } .row { width: 100%; margin-top: 6px; margin-bottom: 4px; padding-bottom: 2px; border-bottom: 1px solid #cccccc; } .row > div:nth-child(2) { text-align: right; /* has no effect */ } .row > .rowName { display: inline-block; } .row > .rowData { display: inline-block; } .row > .rowData > div { display: inline-block; width: 50px; text-align: right }

Antworten auf ähnliche Fragen können nicht alle Anforderungen erfüllen.

Wie kann ich erreichen, dass das erste Div (Text) linksbündig und das zweite Div (Zahlengruppe) rechtsbündig ausgerichtet ist, die Spalten ausgerichtet bleiben, umbrechen, wenn nicht genügend Platz vorhanden ist, und irgendwie bewirken, dass der übergeordnete Container vertikal erweitert wird?