Html 我希望两个跨度标记具有相同的垂直位置

全部代码：

我正在为我的博客制作主题。 在标题部分，有一个问题

<div class="post_title">
    <br/>
    <h2><a href="[##_article_rep_link_##]">[##_article_rep_title_##]</a></h2>
    <span class="post_cate">나만보기</span>
    <span class="post_date">[##_article_rep_date_##]</span>
</div>

h2标签将显示文章的标题。 第一个span标记将显示文章的类别。 第二个span标记将在文章上载时显示

他们在一条线上。 h2和跨度从左侧开始，第二个跨度从右侧开始，因为浮动

当我运行代码时，两个跨度具有不同的垂直位置

第二跨的位置高于第一跨。 我希望两个跨度标记具有相同的垂直位置。 但不要移动第一个跨度标记。我想把第二个调整到第一个

---

如何移动第二个跨距？

有两种方法。一种是保持浮动正确，并正确定位，边距顶部向下推日期：

.post_date {
    margin-top: 16px;
}

当所有内容都在一行上时，它会定位，但如果有多行，则日期将被取消。第二种方法是使用“位置：绝对”将其与底部对齐：

.post_title {
    position: relative;
}

.post_date {
    position: absolute;
    right: 0;
    bottom: 9px;
}

---

结果：

您可以尝试以下方法：

删除float:right from.post_date，然后添加以下css规则：

.post_title {
    position: relative;
}

.post_date {
    position: absolute;
    bottom: 6px;        /* Adjust this to match the height of .post_cate */
    right: 0px;
}

试试这个

---

当你说相同的垂直定位时，你是希望底部对齐还是全部居中？它们应该在同一条线上吗？@jerrylow我想要底部-像这样。@Sam是的。像这样：谢谢你。我认为这是最好的办法。

<div class="post_title">
  <br/>
  <h2><a href="[##_article_rep_link_##]">[##_article_rep_title_##]</a></h2>
  <span class="post_cate">나만보기</span>
  <span class="post_date">[##_article_rep_date_##]</span>
  <br/>
</div>

.post_title h2 {
  display: inline;
  float: left;
  font-size: 15pt;
}
.post_title span {
  color: #bababa;
  line-height: 30px;
}
.post_cate {
  float: left;
}
.post_date {
  float: right;
}