簡體   English   中英

將元素與容器底部對齊

[英]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表:

小提琴

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

如果您的瀏覽器具有flexbox支持,則可以使用

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

然后將頁腳推到底部

.box footer {
    margin-top: auto;
}

參見JSFiddle

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM