html - 将元素与容器底部对齐

Question

我有一些框，每个框都显示博客文章的标题和日期。博客标题最多占框的三行。

HTML

<article class="box" style="height: 144px">
    <header class="entry-header" style="padding-top: 15%;">
        <?php the_title(); ?>
    </header>

    <footer class="entry-meta" style="font-size: 12px;">
        <?php echo get_the_date(); ?>
    </footer>
</article>

CSS

.box {
    background-color: #333333;      
    color: white;       
}

.box header {
    text-align: center;
    word-wrap: break-word;
    margin: 0 10px 0 10px;
}

.box footer {
    text-align: center;
}

由于标题的长度可能不同，我无法将日期与框的底部对齐。

预期结果

我已经尝试将 margin-top 设置为 footer，但这并不能正确对齐日期，因为它们都显示在不同的行上。有没有其他方法可以解决这个问题？

Answer 1

在盒子上设置position:relative;。

在页脚(日期)上设置position:absolute;

.box {

   position: relative;      
}

.box footer {
    position: absolute;
    bottom: 10px; /* however much you need */
}

或者你也可以使用 css 表格:

FIDDLE

CSS

.box
{
    display: table;
}
header
{
    display: table-row;
    height: 100%; /* fills remaining height */
}
footer
{
    display: table-row;
    height: 20px;
}