无需重构标签与值结构，实现网格中多行标签/值对的垂直对齐

嘿，完全可以做到！不用动你现有的HTML结构，只需要调整几行CSS就能让同一行里的所有field-value都自动对齐到该行的最低位置，完美解决多行标签导致的错位问题。

核心思路 #

利用CSS Grid的默认特性（网格子项会自动拉伸填充行高），再给每个字段的内层容器加上弹性布局，把值固定在容器底部——这样不管标签占了多少行，每个字段的底部都会和同行最高的字段底部齐平，自然所有值就对齐了。

修改后的CSS（关键变化已标注） #

* { 
  margin: 0; 
  box-sizing: border-box; 
  outline: 1px solid #0004; 
} 

.card-content-grid { 
  display: grid; 
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); 
  justify-content: space-between; 
  gap: 20px; 
} 

/* *关键修改*：让每个field占满网格项的高度，确保同行field高度统一 */
.field { 
  word-break: break-word; 
  height: 100%; 
}

/* *关键修改*：内层容器用弹性布局，把值推到底部 */
.field > div {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.field-label { 
  font-weight: bold; 
  font-size: 1.2rem; 
  color: red; 
} 

.field-value { 
  font-size: 1.2rem; 
  margin-top: 8px; /* 可选：给标签和值之间加一点间距，优化排版 */
} 

完整可运行代码 #

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Aligned Field Values</title>
  <style>
    * { 
      margin: 0; 
      box-sizing: border-box; 
      outline: 1px solid #0004; 
    } 

    .card-content-grid { 
      display: grid; 
      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); 
      justify-content: space-between; 
      gap: 20px; 
      padding: 20px; /* 可选：加个内边距让内容不贴边 */
    } 

    .field { 
      word-break: break-word; 
      height: 100%; 
    }

    .field > div {
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    .field-label { 
      font-weight: bold; 
      font-size: 1.2rem; 
      color: red; 
    } 

    .field-value { 
      font-size: 1.2rem; 
      margin-top: 8px; 
    } 
  </style>
</head>
<body>
  <div class="card-content-grid">
    <div class="field">
      <div>
        <div class="field-label">Field</div>
        <div class="field-value">Value 1</div>
      </div>
    </div>
    <div class="field">
      <div>
        <div class="field-label">Field 2 Long Label Long Label Long Label</div>
        <div class="field-value">Value ABSAHUASHIUS</div>
      </div>
    </div>
    <div class="field">
      <div>
        <div class="field-label">Field 3</div>
        <div class="field-value">Test Str Test Str Test Str Test Str</div>
      </div>
    </div>
    <div class="field">
      <div>
        <div class="field-label">Field 4</div>
        <div class="field-value">XYZ</div>
      </div>
    </div>
    <div class="field">
      <div>
        <div class="field-label">Field 5</div>
        <div class="field-value">ASDASSFDSFSDFSDFSDFSDFSD</div>
      </div>
    </div>
    <div class="field">
      <div>
        <div class="field-label">Field 6</div>
        <div class="field-value">asas asdasd asdasd</div>
      </div>
    </div>
    <div class="field">
      <div>
        <div class="field-label">Field 7 abcde fghijk lmnopq sfsofs sfsdfdsfs sfsfsfsff</div>
        <div class="field-value">a</div>
      </div>
    </div>
    <div class="field">
      <div>
        <div class="field-label">Field 8</div>
        <div class="field-value">---</div>
      </div>
    </div>
    <div class="field">
      <div>
        <div class="field-label">Field 9</div>
        <div class="field-value">Long String Long String</div>
      </div>
    </div>
    <div class="field">
      <div>
        <div class="field-label">Field 10</div>
        <div class="field-value">X</div>
      </div>
    </div>
    <div class="field">
      <div>
        <div class="field-label">Field 11</div>
        <div class="field-value">Xsdfsfsdfsdfsf</div>
      </div>
    </div>
  </div>
</body>
</html>

效果说明 #

你直接替换原有CSS即可，不用修改任何HTML结构。运行后会发现：

• 同一网格行的所有field-value都会自动对齐到该行的最低位置
• 不管标签内容有多行，都不会影响值的对齐效果
• 完全保留了你原有的标签和值的结构，不用做任何重构

内容来源于stack exchange