我有几个框,每个框显示博客文章的标题和日期。博客标题最多将占据该框的三行。
的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;
}