Question

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

<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和span从左侧开始，第二个跨度从右侧开始，因为浮动。

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

http://goo.gl/vZwSzz

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

如何移动第二个跨度？

Answer 1

有两种方法可以做到这一点。一个是保持浮动正确并正确定位，边缘向上推动日期：

.post_date {
    margin-top: 16px;
}

当一切都在一行上时，这会定位它，但如果有多行则日期将关闭。第二种方法是使用position：absolute将其与底部对齐：

.post_title {
    position: relative;
}

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

结果：http://jsfiddle.net/3TQq6/1/

Answer 2

您可以尝试以下操作：

DEMO

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

.post_title {
    position: relative;
}

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

Answer 3

试试这个，fiddle

<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;
}

我希望两个span标签具有相同的垂直位置

3 个答案: