僅使用HTML在父div中垂直對齊動態div

Question

這是我們的html：

<div id="1" class="right">
    <div class="top"><img src=".png" alt=""></div>
    <div class="content">Some dynamic text</div>
    <div class="bottom"><img src=".png" alt=""></div>
</div>

這是我們的CSS：

.right{position:relative; top:-304px; width:170px; height:191px;}
.content{background:url(.png) repeat-y; width:170px;}

如何將＃1的內容垂直對齊以始終位於底部？ 設計和技術限制意味着我們不能使用任何CSS表屬性或JavaScript。

Answer 1

演示 （ 滾動到小提琴的尾巴以查看圖像 ）

.right {
    position:relative;
    top:304px;
    width:170px;
    height:191px;
}
.content {
    background:url(.png) repeat-y;
    width:170px;
}
.bottom {
    position:absolute; /* this is the key */
    bottom:0;/* this is the key */
}
.bottom >img {
    width:100%;
}

要做 ：使用relative父div的absolute子代

添加了說明：由於您的.right具有top:-304px; 並且整個div沒有內容和height : 191px ，因此整個標記的height = -113px （ height = -113px + 191 ），因此您將看不到任何東西...更改高度即可看到它。 明白我在說什么

編輯

假設您的div高度固定 ， 這是不使用位置的解決方案

.right {
    width:170px;
    height:400px;
    border:1px solid #000;
}
.content {
    background:url(.png) repeat-y;
    width:170px;
}
.bottom {
    margin-top:300px;
    margin-bottom: -200px;    /* the bottom margin is the negative value of the footer's height(200px) */
}
.bottom >img {
    width:100%;
}

Answer 2

您應該將class .right更改為此：

.right{
     position:absolute; 
     bottom: 0; 
     width:170px; 
     height:191px;
 }

希望對您有所幫助：）