将文本基线与 div 底部对齐

Question

我正在尝试将a 中某些文本的基线div对齐到所说的最底部边缘div（这样字符 likeg和j实际上会溢出 div）

我似乎只能将文本元素的底部边缘与div. 我尝试在内部和外部元素上使用vertical-align值baseline和，但没有成功。bottom

div {
  height: 80px;
  width: 300px;
  background: #ff5;
  position: relative;
}

span {
  font-size: 30px;
  position: absolute;
  left: 0;
  bottom: 0;
}

<div>
  <span>
  TEST gjp ABC
  </span>
</div>

我还希望能够将基线从 div 底部偏移bottom: 10px;（例如，将文本的基线放置在距 div 底部边缘10px的位置）。

编辑：我还应该提到我想保留元素position: absolute;上的属性span，因为我想在父级中自由定位多个属性div.

例如，在这里，A的基线应位于 div 的下边缘，B的基线应位于其上方10px ， C的基线应位于其上方20px：

div {
  height: 80px;
  width: 300px;
  background: #ff5;
  position: relative;
}

span {
  font-size: 30px;
  position: absolute;
  left: 0;
  bottom: 0;
}

<div>
  <span style="left: 0px; bottom: 0px;">
  A
  </span>
  <span style="left: 50px; bottom: 10px;">
  B
  </span>
  <span style="left: 100px; bottom: 20px;">
  C
  </span>
</div>

Answer 1

添加一个::before高度为 100% 的伪元素，display: inline-block;并使用它来垂直对齐<span>到基线：

div {
  height: 80px;
  width: 300px;
  background: #ff5;
  position: relative;
}

div::before {
  display: inline-block;
  height: 100%;
  content: '';
}

span {
  font-size: 30px;
  vertical-align: baseline;
}

<div>
  <span>TEST gjp ABC</span>
</div>

您可以将相同的想法应用于跨度本身，但您必须声明跨度的高度：

div {
  height: 80px;
  width: 300px;
  background: #ff5;
  position: relative;
}

span {
  display: inline-block;
  font-size: 30px;
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1em;
  background: red;
}

span::before {
  display: inline-block;  
  height: 100%;
  vertical-align: baseline;
  content: '';
}

<div>
  <span style="left: 0px; bottom: 0px;">gjp</span>
  <span style="left: 50px; bottom: 10px;">gjp</span>
  <span style="left: 100px; bottom: 20px;">gjp</span>
</div>