设置 div 在 parental div 的底部没有固定高度

Question

问题：

悬停 div .galleryIndex 将 "filled" 和 div .galleryHover。 .galleryIndex 有百分比宽度，没有固定高度。我想把 div .white_line_gallery_hover 放在 div .galleryHover 的底部。

HTML:

 <div class="galleryIndex">
     <img src="images/galleryIndex1.png" class="imageResponsive" />
     <div class="galleryHover">
         <img src="images/kotacGalerija.png" class="imageResponsive" />
         <div class="white_line_gallery_hover">
            Some text
         </div>      
     </div>
 </div>

CSS:

.galleryIndex
    {
    width: 33.33%;
    height: auto;
    overflow: hidden;
    float: left;

    position: relative;
    z-index: 1;
    }

.galleryHover
    {
    position:absolute;
    top:0;
    left:0;
    bottom: 0;
    width:100%;
    height:100%;

    background-color: rgba(24, 2, 51, 0.8);
    }

.imageResponsive
    {
    width: 100%;
    height: auto;
    }

.white_line_gallery_hover
    {
    width: 90%;
    height: 10%;
    overflow: hidden;

    padding-left: 10%;
    font-size: 20px;
    line-height: 40px;
    background-color: white;
    }

Answer 1

尝试给出“.white_line_gallery_hover”"position: absolute; bottom: 0" 并删除 "height: 10%"。这将导致 "white_line_gallery_hover" 覆盖 "galleryIndex" 中图像的底部。

参见：http://jsfiddle.net/ff22qayv/

.galleryIndex
    {
    width: 33.33%;
    height: auto;
    overflow: hidden;
    float: left;

    position: relative;
    z-index: 1;
    }

.galleryHover
    {
    position:absolute;
    top:0;
    left:0;
    bottom: 0;
    right: 0;

    background-color: rgba(24, 2, 51, 0.8);
    }

.imageResponsive
    {
    width: 100%;
    height: auto;
    }

.white_line_gallery_hover
    {
    position: absolute;
    bottom: 0;
    width: 90%;

    overflow: hidden;

    padding-left: 10%;
    font-size: 20px;
    line-height: 40px;
    background-color: white;
    }

 <div class="galleryIndex">
     <img src="https://placekitten.com/g/300/300" class="imageResponsive" />
     <div class="galleryHover">
         <img src="images/kotacGalerija.png" class="imageResponsive" />
         <div class="white_line_gallery_hover">
            Some text
         </div>      
     </div>
 </div>

如果这不是您想要的，您可以考虑使用所需结果的可视化表示来更新您的问题。

设置 div 在 parental div 的底部没有固定高度

setting div at the bottom of parental div without fixed height

html

javascript

css

jquery

问题：

HTML:

CSS: