css - 如何使 div 基线的底部与两侧的文本对齐？

Question

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

我尝试了很多方法，包括div 的display 样式的所有各种inline- 选项，对齐文本在 div 等之一的底部。无论我做什么，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;
}

我也有它在 fiddle : https://jsfiddle.net/2fjcgn4x/

下面是 fiddle 生成的屏幕截图: Picture of what I want vs what happens

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

Answer 1

您可以为 .innerContainer 使用 flexbox。添加 display: flex 和 align-items: end; 足以获得预期的结果。一般来说，Flexbox是解决此类问题的首选方法。

Link to fiddle