我有包含文字和資料的行。
文字方塊必須向左對齊，且 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>