css - 如何对齐 float 元素，使其底部匹配

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，并在两个文本元素上使用绝对定位(并取出 float 声明)。这没有用，因为包装 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;
}