在父级div的底部设置div而没有固定的高度

Question

问题：

悬停div .galleryIndex将被填充＆＃34;与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>

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