[英]Aligning element absolute bottom inside floated container (with left and right floats)
[英]Aligning an element to the bottom of a container
我有幾個框,每個框顯示博客文章的標題和日期。 博客標題最多將占據該框的三行。
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
,但這不能正確對齊日期,因為它們都顯示在不同的行上。 我還有其他方法可以解決這個問題嗎?
設定position:relative;
在盒子上。
設定position:absolute;
在頁腳上(日期)
.box {
position: relative;
}
.box footer {
position: absolute;
bottom: 10px; /* however much you need */
}
另外,您也可以使用css表:
.box
{
display: table;
}
header
{
display: table-row;
height: 100%; /* fills remaining height */
}
footer
{
display: table-row;
height: 20px;
}
如果這些框將始終保持固定的高度不變,則可以將內容包裝在容器中並在其上設置高度,然后在其下面放置日期,例如:
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%;
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.