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

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

在某些情况下，您还可以通过在 h2 中放置一个浮动和清除的跨度来完成此操作：

<h2>Actual header text
<span style="display: inline-block; float: right; clear: both;">Some floated content</span>
</h2>

这个跨度将与 h2 的底部对齐。在里面，你可以为所欲为；当页面缩小时，浮动内容将整齐地放在标题文本下方。

Answer 2

许多其他答案告诉您通过为填充/行高应用静态数字来纠正差异，我认为这是一个不好的解决方案。如果您使用静态数字“纠正”差异，并且将来差异发生变化，您必须更改所有静态数字。想象一下，您对 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 3

这应该可以解决它

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

Answer 4

尝试为 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

Answer 5

我知道很多人会不同意，而且有点冗长，但<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 6

对类 Date 使用 padding-top

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