仅使用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

demo （滚动到小提琴的基础以查看图像）

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

要做：使用absolute父级的relative子级

已添加说明，因为您的.right已top:-304px;且整个div没有内容且height : 191px，因此整个标记为height = -113px （ -304 + 191 ），所以你将无法看到任何东西......改变高度来看它。 see what i am talking about

修改

假设您有固定高度div ，here is a solution without using position

.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

您应该将课程.right更改为：

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

我希望这可以帮助你:)。