如何在容器中僅向右浮動第二個 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 }