Question

我搜索了各种各样的问题，这些问题似乎都能将绝对的孩子扩展到他们的亲戚之外。我试图避免这种情况。

我有一个位置的div：relative;包含一个位置为div的绝对值;我想永远坐在div的底部。当我设置底部：0px;绝对孩子以4像素延伸超出父div。它可以通过设置底部来解决：4px;但是，当我开始使网站响应时，这样的绝对数字不会成功。

HTML：

<a href="her.html">
    <div class="next_movie">
        <img src="img/her_header.jpg" alt="Picture from the movie 'Her'">
        <div class="movie_info">
           <h2>Her (2013) March 6th in AUD1</h2>
         </div>
    </div>
</a>

的CSS：

.movies {
    width: 616.6px;
    height:663px;
    background-color: #e3e3e3;
    margin-top: 75px;
    position: absolute;
    left:233.3px;;
}
.movie_info, .poster_info {
    color:white;
}
.next_movie {
    position:relative;
    margin:16.6px;

}
.movie_info{
    position:absolute;
    left:0px;
    bottom:0px;
    width:582.5px;
    height:56.6px;
    background:rgba(0,0,0,0.5);
    color:white;
    font-size:25px;
    line-height: 2.3;
}
.movie_info h2 {
    margin-left:15.8px;
}

该网站的测试版本位于： http://jhalland.dk/test/

Answer 1

您应该尝试从movie_info样式中删除高度。或者您可以将其更改为最小高度。由于您已将line-height定义为2.3

，因此您的规则存在冲突

绝对定位div扩展相对定位的父div

1 个答案: