html - 文本左对齐，另一个文本在同一行上以不同的高度右对齐

Question

我有这个代码

<div>
  <div style="float:left">
      <h2>header</h2>
  </div>
  <span style="float:right; vertical-align: bottom">
          text2
  </span>
  <div class="clear:both"></div>
</div>

我无法将 text2 垂直对齐到父级 div 的底部。

怎么做？

Answer 1

这是相当奇怪的 HTML 代码，但这里有一个不改变 HTML 的解决方案:

(附言:您要求 span 应与父 DIV 的底部对齐，而不是与 h1 对齐。如果您想要后者，则必须给出它们都是相同的 margin-bottom 和 padding-bottom。)

div:first-of-type {
position: relative;
overflow: hidden;
}
span {
display: block;
position: absolute;
right: 0;
bottom: 0;
}

<div>
  <div style="float:left">
      <h2>header</h2>
  </div>
  <span style="float:right; vertical-align: bottom">
          text2
  </span>
  <div class="clear:both"></div>
</div>