如何让 div 基线的底部与两侧的文本对齐？答案

【问题标题】：How can I get the bottom of a div baseline aligned with the text on either side?如何让 div 基线的底部与两侧的文本对齐？
【发布时间】：2019-08-16 01:10:18
【问题描述】：

我试图让一些文本与相邻的div 对齐，而不是与div 中的文本内容对齐。我想在不创建新浏览器层的情况下执行此操作。

我尝试了多种方法，包括用于div 的display 样式的所有各种inline- 选项，在divs 之一的底部对齐文本等。不管我所做的是，div 之外的文本最终根据div 内部的文本对齐。

这体现了我想要的与实际发生的情况。

<div class="cell">
  <div class="innerContainer">
    I want this
    <div class="placeholder">
    </div>
  </div>
</div>

<div class="cell">
  <div class="innerContainer">
    Not this
    <div class="placeholder">
      text here messes things up
    </div>
  </div>
</div>

.cell {
  background-color: green;
  padding: 25px;
  width: 300px;
  border: 1px solid gray;
  margin-bottom: 25px;
}

.innerContainer {
  border: 1px solid black;
  background-color: white;
}

.placeholder {
  width: 100px;
  height: 100px;
  background-color: red;
  display: inline-block;
}

我也有一个小提琴： https://jsfiddle.net/2fjcgn4x/

这是小提琴生成的屏幕截图： Picture of what I want vs what happens

我可以使用 div 中文本的绝对定位来做到这一点，但令我惊讶的是，您不能告诉浏览器使用特定元素或文本集作为对齐的基础。

【问题讨论】：

vertical-align 是你的朋友 jsfiddle.net/hnwzqfoe 或 jsfiddle.net/js9qgnaw
在这两个示例中，您都丢失了红色框下方的下行空间，如原始小提琴所示。
您是否尝试过在父级上使用填充来管理此问题....或阅读有关 vertical-align 的信息？弄清楚为什么基线有差距...... gpy (letters) 需要它；）它确实是关于内联级样式、内联框或文本或两者混合在同一个 html 树级别上。
下降者是什么意思？他们是在这个问题中还是正在成为另一个问题？ ;) 在此边距/填充选项旁边 jsfiddle.net/qz6dogxp
Descenders 是一个排版术语，用于描述低于基线的字母。基线是大多数字母所在的位置。 y、q、g 等字母都低于基线。内联文本元素为这些下行元素留出了空间，这就是为什么您会看到红色方块与其下方容器 div 的边框之间存在间隙。

标签： css inline vertical-alignment

【解决方案1】：

您可以将弹性框用于.innerContainer。添加display: flex 和align-items: end; 足以得到预期的结果。一般来说，Flexbox 是解决这类问题的首选方法。

Link to fiddle

【讨论】：

那没有将左侧文本的底部与红色框的底部对齐，这就是我想要做的。它也没有为红色框下方的下降器留下额外的空间。