Question

我正在写一个网页，我在其中显示一些文字的标题和日期。

Blog post header http://filesmelt.com/dl/head00.png

我的HTML：

<div class="post">
    <h2>Post 1</h2>
    <span class="date">February 28, 2011</span>

    <div class="post-content">
        ...
    </div>
</div>

我的css：

.post h2
{
    float: left;
}

.date
{
    float: right;
}

.post-content
{
    clear: both;
}

我想要做的是垂直对齐标题和日期，使其底部匹配。现在他们没有：

Blog post header with alignment lines http://filesmelt.com/dl/head01.png

我尝试将div中的两个文本元素包装起来，将div的position设置为relative，并在两个文本元素上使用绝对定位（并取出浮动声明）。这不起作用，因为由于包装器div崩溃而没有保留上边距，即使我给它一个clearfix类。

Answer 1

许多其他答案告诉您通过应用填充/行高的静态数字来纠正差异，我认为这是一个糟糕的解决方案。如果你＆＃34;纠正＆＃34;与静态数字的差异，以及将来改变所有静态数字的差异。想象一下，您将填充应用于Date div以及稍后h2更改的字体大小，您必须更改填充。

试试这个：

<div class="wrapper">
 <h2>Post 1</h2>
 <span class="date">February 28, 2011</span>
</div>

和css：

.post h2 {
    display: inline-block;
}

.wrapper {
  position: relative;
}

.date {
    display: inline-block;
    position: absolute;
    right: 0;
    bottom: 0;
}

Answer 2

使用padding-top作为课程日期

.date
{
    float: right;
    padding-top:15px;//Distance between the red lines in second image
}

Answer 3

这应该解决它

.date
{
float: right;
line-height:150%;
}

Answer 4

我知道很多人不同意，而且有点冗长，但<table>可以很好地解决这个问题：

/*CSS Somewhere*/
table {width:100%;}
td {vertical-align:bottom;}

<!--HTML-->
<table border="0" cellspacing="0" cellpadding="0">
  <tr>
   <td align="left">
     <h2>Post 1</h2>
   </td>
   <td align="right">
     <span>Feb...</span>
   </td>
 </tr>
</table>

Answer 5

尝试为h2和span

指定line-height

Syntax:     line-height: <value>;
Possible Values:    

    * normal
    * <length> - for example, 10px
    * <number> - multiplied with the current font size
    * <percentage> - for example, 130% of current font size
    * inherit

例如：

h2, span.date {
  line-height: 20px;
}

您可能还需要设置：

span.date{
   display:block;
}

这是一个类似的问题 Vertically align floating DIVs

如何对齐浮动元素以使其底部匹配

5 个答案: