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

Question

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

博客文章标题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;
}

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

带有对齐线的博客文章标题http://filesmelt.com/dl/head01.png

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

Answer 1

许多其他答案告诉你通过应用填充/行高的静态数字来纠正差异,我认为这是一个糟糕的解决方案.如果您使用静态数字"更正"差异,并且将来差异更改,您必须更改所有静态数字.想象一下,您应用填充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;
}