2番目のdivのみをコンテナ内の右側にフローティングし、長すぎる場合に最初のdivをラップする方法
テキストとデータを含む行があります。
テキスト ボックスは左揃えで、テキストも左揃えにする必要があります。 ナンバーボックスは右揃えで、テキストも右揃えにする必要があります。
名前が長すぎる場合を除き、これらは並べて存在する必要があります。名前が長すぎる場合は、ナンバー ボックスが行内で折り返されます。行内のすべての数値を一緒にパックする必要があります。各名前の各行の長さは異なります。
ナンバー ボックスが折り返されると、外側のコンテナーは垂直方向に拡張する必要があります。これは、その下に境界線があり、その境界線が数値の下に留まる必要があり、次の行には下に押し下げる必要があるマージンの上部があるためです。
各行の 2 列の数値は、すべての行で垂直方向に揃える必要があります。
行数が多く、何百もの行があるため、レンダリング時間を短くするために冗長なマークアップを最小限に抑える必要があります。
私が試したこと:
float を使用しようとしましたが、float は親コンテナから div をバインド解除し、ラップするときに親ボックスを垂直方向に拡張しません。
right:0px の位置を使用しようとしましたが、ナンバー ボックスが折り返されません。
フレックスを使用してみましたが、各行のテキストと数値の長さが異なるため、数値が他の行と整列しなくなりました。
HTML
リーリーCSSS
リーリー同様の質問への回答がすべての要件を満たすとは限りません。
最初の div (テキスト) を左揃え、2 番目の div (数値グループ) を右揃えにし、列を揃えて保持し、十分なスペースがない場合に折り返し、何らかの方法でその親コンテナを縦にラップして展開します。
