如何在容器中仅向右浮动第二个 div 并在第一个 div 太长时将其换行-PHP中文网问答

我有包含文本和数据的行。

文本框必须向左对齐，且 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 }