将元素与容器底部对齐答案

【问题标题】：Aligning an element to the bottom of a container将元素与容器底部对齐
【发布时间】：2013-12-30 07:03:47
【问题描述】：

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

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，但这并不能正确对齐日期，因为它们都显示在不同的行上。有没有其他方法可以解决这个问题？

【问题讨论】：

Constant row hight 的可能重复项

标签： html css

【解决方案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;
}

【讨论】：

【解决方案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%;
}

【讨论】：

【解决方案3】：

如果你有支持flexbox的浏览器，你可以使用

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

并用

将页脚推到底部

.box footer {
    margin-top: auto;
}

见JSFiddle

【讨论】：