如何实现<dt>与<dd>并排布局，长<dt>时<dd>自动下移？

方案一：语义化分组+容器查询（推荐） #

通过给<dt>和<dd>添加语义化分组容器，结合CSS容器查询自动判断<dt>内容长度，无需手动添加任何类，完美匹配需求：

HTML代码（符合语义规范） #

<dl>
  <div>
    <dt>one</dt>
    <dd>one</dd>
  </div>
  <div>
    <dt>two that is longer than 10em</dt>
    <dd>two moves down automatically without manual classes</dd>
  </div>
  <div>
    <dt>three</dt>
    <dd>three</dd>
  </div>
</dl>

CSS代码 #

/* 外层定义列表布局 */
dl {
  display: grid;
  gap: 0.8em; /* 调整组与组之间的垂直间距 */
}

/* 每个dt+dd的分组容器 */
dl > div {
  container-type: inline-size; /* 启用容器查询 */
  display: grid;
  grid-template-columns: minmax(10em, max-content) 1fr; /* 默认双列：左列最小10em，最大为内容宽度；右列占剩余空间 */
  gap: 0 1em; /* 调整dt和dd之间的横向间距 */
}

dt {
  white-space: nowrap; /* 强制dt不换行 */
}

dd {
  margin: 0; /* 清除默认边距 */
}

/* 容器查询：当分组宽度超过10em（即dt内容过长），切换为单列布局 */
@container (width > 10em) {
  dl > div {
    grid-template-columns: 1fr; /* 改为单列布局 */
  }
  
  dd {
    padding-left: 10em; /* 保持和双列布局左列一致的缩进 */
  }
}

效果说明 #

• 当<dt>内容长度≤10em时，维持双列布局：<dt>在左列（最小宽度10em），<dd>在右列
• 当<dt>内容长度>10em时，自动切换为单列布局：<dt>占满整行，<dd>下移并缩进10em
• 全程无需手动干预，完全自动适配

方案二：不修改原有HTML结构（依赖高级CSS特性） #

如果希望保留原始<dl>结构，可利用CSS的:has选择器和容器查询实现，但兼容性略有限制：

HTML代码（保持原结构） #

<dl>
  <dt>one</dt>
  <dd>one</dd>
  <dt>two that is longer than 10em</dt>
  <dd>two moves down automatically without manual classes</dd>
  <dt>three</dt>
  <dd>three</dd>
</dl>

CSS代码 #

dl {
  display: grid;
  grid-template-columns: minmax(10em, max-content) 1fr;
  gap: 0.5em 1em;
}

dt {
  white-space: nowrap;
  grid-column: 1;
  container-type: inline-size;
}

dd {
  grid-column: 2;
  margin: 0;
}

/* 当dt容器宽度超过10em时，调整布局 */
@container (width > 10em) {
  dt:has(+ dd) {
    grid-column: 1 / -1; /* dt占满整行 */
  }
  
  dt:has(+ dd) + dd {
    grid-column: 1 / -1; /* dd占满整行 */
    padding-left: 10em; /* 缩进对齐左列宽度 */
  }
}

效果说明 #

• 无需修改原有HTML结构，自动适配<dt>长度
• 兼容性要求：Chrome 105+、Firefox 110+、Safari 16.4+

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