将元素与容器底部对齐

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

由于标题的长度可能会有所不同，因此我很难将日期与框的底部对齐。

预期结果

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

Answer 1

设定position:relative; 在盒子上。

设定position:absolute; 在页脚上（日期）

.box {

   position: relative;      
}

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

另外，您也可以使用css表：

小提琴

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