如何将一个div与另一个div第一行的基线对齐？

我完全懂你遇到的这个痛点——当其中一个Div里面塞了多行文本和各种嵌入内容时，浏览器默认的基线对齐会自动落到元素的底部，完全不是你想要的第一行文本基线对齐效果。下面给你几个纯CSS解决方案，优先推荐现代浏览器友好的Flexbox方案，兼容性要求高的话也有备选思路。

方案一：用Flexbox的first baseline对齐（首推） #

Flexbox的align-items: first baseline就是专门解决这个场景的，它能让容器内所有子元素的第一行文本基线精准对齐，不管子元素内部有多少行内容或者嵌入元素，都能完美匹配你的需求。

示例代码 #

<div class="container">
  <div class="box box-single">
    这是单行文本的Div
  </div>
  <div class="box box-multi">
    这是第一行文本<br>
    第二行多行内容<br>
    还有嵌入的<span>内联元素</span>
  </div>
</div>

.container {
  display: flex;
  /* 核心属性：对齐第一行文本的基线 */
  align-items: first baseline;
  gap: 1.5rem; /* 可选：给两个Div之间加些间距，看着更舒服 */
}

.box {
  padding: 0.6rem;
  border: 1px solid #ddd;
  /* 可选：防止内容溢出，根据你的需求调整 */
  min-width: 120px;
}

为啥这个方案好用？ #

first baseline会自动忽略子元素内部的块级内容，只盯着第一行内联文本的基线来对齐，不管你的多行Div里有多少花里胡哨的内容，都能保证顶部文本的基线对齐，完全符合现代布局的最佳实践。

方案二：兼容旧浏览器的inline-block调整 #

如果你需要兼容一些不支持Flexbox的老旧浏览器（比如IE10及以下），可以试试这个思路：把两个Div设为inline-block，然后给包含多行内容的Div额外设置vertical-align: baseline，同时确保内部的块级元素不会影响基线计算。

示例代码 #

.container {
  /* 消除inline-block元素之间的默认空格 */
  font-size: 0;
}

.box {
  display: inline-block;
  font-size: 16px; /* 恢复正常字体大小 */
  vertical-align: baseline;
  padding: 0.6rem;
  border: 1px solid #ddd;
  min-width: 120px;
  margin-right: 1.5rem;
}

/* 关键：如果多行Div内部有块级元素，要把它们的基线重置 */
.box-multi > * {
  display: inline;
  /* 或者用float，但inline更简单 */
}

不过这个方案有个局限：如果多行Div内部必须保留块级元素，那基线还是会落到元素底部，这时候还是Flexbox方案更靠谱。

方案三：JavaScript辅助（仅当CSS方案走不通时用） #

如果因为项目限制不能用上面的CSS方案，也可以用JS手动调整位置，但这个方法需要处理很多边界情况（比如字体变化、窗口缩放），所以只作为备选：

const singleBox = document.querySelector('.box-single');
const multiBox = document.querySelector('.box-multi');

// 获取第一行文本的基线位置（简化版，实际可以通过文本节点的getBoundingClientRect更精准计算）
const singleBaseline = singleBox.getBoundingClientRect().top + parseInt(getComputedStyle(singleBox).lineHeight);
// 取多行Div的第一个文本节点的基线
const multiFirstLine = multiBox.firstChild.nodeType === Node.TEXT_NODE ? multiBox.firstChild : multiBox.firstElementChild.firstChild;
const multiBaseline = multiFirstLine.getBoundingClientRect().top + parseInt(getComputedStyle(multiBox).lineHeight);

// 调整多行Div的位置
multiBox.style.transform = `translateY(${singleBaseline - multiBaseline}px)`;

这个方法需要根据你的实际DOM结构调整，不如CSS方案稳定，所以优先用前面的纯CSS解决思路。

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