J'ai des lignes contenant du texte et des données.
La zone de texte doit être alignée à gauche et le texte aligné à gauche. La zone numérique doit être alignée à droite et le texte aligné à droite.
Ils doivent exister côte à côte, à moins que le nom ne soit trop long, auquel cas la zone numérique s'enroulera dans la ligne. Tous les nombres de la ligne doivent être regroupés. Chaque nom a une longueur différente sur chaque ligne.
Lorsque la zone numérique s'enroule, le conteneur extérieur doit s'étendre verticalement car il y a une bordure en dessous qui doit rester en dessous du numéro, et la ligne suivante a une marge supérieure qui doit être poussée vers le bas.
Les 2 colonnes de chiffres de chaque ligne doivent être alignées verticalement dans toutes les lignes.
Comme il existe de nombreuses lignes, des centaines, le balisage redondant doit être minimisé pour réduire les temps de rendu.
Ce que j'ai essayé :
J'ai essayé d'utiliser float, mais float dissocie le div du conteneur parent et ne provoque pas l'expansion verticale de la boîte parent lors de l'enveloppement.
J'ai essayé d'utiliser une position de right:0px mais la zone numérique ne s'enroule pas.
J'ai essayé d'utiliser flex, mais les nombres ne s'alignent plus avec les autres lignes car chaque texte et numéro sur chaque ligne a une longueur différente.
HTML
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<br />
<br />
<div class="container">
<div class="row">
<div class="rowName">short name</div>
<div class="rowData">
<div>000 xx</div>
<div>000 %</div>
</div>
</div>
<div class="row">
<div class="rowName">long name long name long name</div>
<div class="rowData">
<div>000 xx</div>
<div>0 %</div>
</div>
</div>
</div>
</body>
</html>
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
}
Les réponses à des questions similaires ne peuvent pas satisfaire à toutes les exigences.
Comment puis-je aligner le premier div (texte) à gauche et le deuxième div (groupe de nombres) à droite, garder les colonnes alignées, les renvoyer lorsqu'il n'y a pas assez d'espace et faire en sorte que son conteneur parent s'étende verticalement enveloppé.
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Vous n'avez publié aucun résultat attendu, donc je ne peux que deviner... est-ce ce que vous voulez ?
.container { width: 300px; } .row { width: 100%; margin-top: 6px; margin-bottom: 4px; padding-bottom: 2px; border-bottom: 1px solid #cccccc; } /* fix floated children taken out of parent's size */ .row::after { content: ''; display: block; clear: both; } .row>.rowName { display: inline-block; } .row>.rowData { display: inline-block; float: right; } .row>.rowData>div { display: inline-block; width: 50px; text-align: right }<div class="container"> <div class="row"> <div class="rowName">short name</div> <div class="rowData"> <div>000 xx</div> <div>000 %</div> </div> </div> <div class="row"> <div class="rowName">long name long name long name</div> <div class="rowData"> <div>000 xx</div> <div>0 %</div> </div> </div> </div>