如何实现容器内第二个div右对齐且首个div过长时换行

需求概述 #

• 文本区域左对齐，数字区域右对齐
• 默认状态下文本与数字并排显示；文本长度超出容器剩余空间时，数字区域整体换行至文本下方
• 数字换行时，外层行容器自动垂直扩展，确保底部边框位于数字下方，同时向下推挤下一行的上边距
• 所有行的数字列需保持垂直对齐，且需尽量减少HTML冗余标记以适配数百行的渲染性能

已尝试方案及问题 #

• float布局：数字区域脱离文档流，换行时父容器无法自动适配高度
• 绝对定位：数字区域无法随文本过长自动换行
• 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;
  /* Grid布局自动包裹内容，支持换行时高度扩展 */
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0 8px; /* 设置文本与数字的水平间距 */
  align-items: start;
}

.rowName {
  text-align: left;
  word-wrap: break-word; /* 文本过长时自动换行 */
}

.rowData {
  justify-self: end; /* 默认状态下数字区域靠右 */
  width: 100px; /* 固定宽度保证所有行数字列对齐 */
}

.rowData > div {
  display: inline-block;
  width: 50px;
  text-align: right;
}

方案说明 #

1. Grid布局特性：display: grid让行容器自动包裹内部元素，数字区域换行时会自动扩展容器高度，确保底部边框始终位于内容最下方
2. 数字列对齐：给rowData设置固定宽度，确保所有行的数字区域宽度一致，实现跨行垂直对齐
3. 自适应换行：grid-template-columns: minmax(0, 1fr)让文本区域优先占据可用空间，当文本宽度加上数字区域宽度超出容器时，数字区域自动换行至下方，并通过justify-self: end保持右对齐
4. 性能优化：保留原有的简洁HTML结构，无额外冗余标记，适合数百行数据的高效渲染

内容的提问来源于stack exchange，提问作者FigureOfCode