我有几个框,每个框显示博客文章的标题和日期。博客标题最多将占据该框的三行。



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

最佳答案

在框上设置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;
}

10-05 20:56
查看更多