我有包含文本和数据的行。
文本框必须向左对齐，且 text-align left。 数字框必须右对齐，文本右对齐。
它们应该并排存在，除非名称太长，此时数字框将在行内换行。该行的所有数字应包装在一起。每个名称在每行上都有不同的长度。
当数字框换行时，外部容器必须垂直展开，因为它下面有一个边框，必须保持在数字下方，并且下一行有一个必须向下推的边距顶部。
每行的 2 列数字必须在所有行中垂直对齐。
因为有很多行，数百行，所以应该最大限度地减少多余的标记，以保持较短的渲染时间。
我尝试过的：
我尝试使用float，但是float会解除div与父容器的绑定，并且不会导致父框在换行时垂直展开。
我尝试使用 right:0px 的位置，但数字框不会换行。
我尝试使用 flex，但数字不再与其他行对齐，因为每行的每个文本和数字的长度都不同。
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
}
类似问题的答案无法满足所有要求。
如何实现第一个 div（文本）左对齐，而第二个 div（数字组）右对齐，保持列对齐，空间不足时换行，并以某种方式导致其父容器展开垂直包裹。
您没有发布任何预期结果，所以我只能猜测...这是您想要的吗？
.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>