将元素对齐到容器的底部

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;
}

Answer 2

如果这些盒子总是一直是固定的高度，你可以将内容包装在一个容器中并在其上设置一个高度并将日期放在下面，例如：

HTML

<div class="box">
    <div class="container">
       <p>text goes here</p>
    </div>
    <p>24 December, 2013</p>
</div>

CSS

.box{
    height: 100px;
    width: 100px;
    background-color: grey;
}

.container{
    height: 90px;
    width: 100%;
}

Answer 3

如果您的浏览器支持flexbox，则可以使用

.box {
    display: inline-flex;
    flex-direction: column;
}

并使用

将页脚推到底部

.box footer {
    margin-top: auto;
}

请参阅JSFiddle