html - 内部div没有定位到右下角

Question

我有一个嵌套有两个 div 的 Bootstrap 网格列:父 div 是图像，子 div 是不透明的颜色。我试图将子 div 对齐到父 div 的右下角。但是，当我为此对齐应用绝对定位时，整个 div 不恰本地向上移动。有关如何防止这种向上移动但仍将子 div (oqaque-7) 对齐到父 div (col-md-4) 右下角的任何建议。

HTML:

<div class="row-eq-height">
       <div class="col-md-4" id="col-7">
                <div class="opaque-7">
                   <h4>ABC</h4>
                   <h3>ddddddddddd eeeeee</h3>
                   <h3>PPPPP</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque venenatis euismod nvallis vel. Fusce Vitae  Quisque venenatis euismod</p>
                      <button type="button" class="btn btn-secondary" id="btn-7" onclick="location.href='/#/'">
                                    DISCOVER
                       </button>
               </div><!--.opaque-7-->
          </div><!--.col-md-4-->
</div><!--.row-eq-height-->

CSS:

         .row-eq-height{
           display: flex;
            flex-wrap: wrap;
         }
         #col-7{
            background-image:url('/site/templates/images/image.jpg');
            border: none;
        }
        .opaque-7{
           background-color:#24B5B0; 
           filter: alpha(opacity=80); 
           -moz-opacity: 0.8; 
           -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
           -khtml-opacity: 0.8;
           opacity: 0.8;
           padding-left:5%;
           padding-top:10%;
           padding-bottom:10%;
           bottom:0;
           margin-top:40%;
           position: absolute;
           float:right;
        }
        #col-7 h4{
          color: white;
          text-align: left;
        }
        #col-7 h3{
          color:white; 
          text-align:left;
          margin-top:-10px;
        }
        #col-7 p{
          color:white;
          text-align: left;
        }
        #btn-7{
          background-color:#30CFCA;
          color:white; 
          float:left;
           margin-top: 10%;
          margin-bottom: -6%;
          display: block;
        }

Answer 1

您可能希望将 child 的宽度设置为 90%，移除 child 上的 float 和边距顶部。看到这个:https://jsfiddle.net/GunWanderer/asugvrw9/

.opaque-7{
    background-color:#24B5B0; 
    filter: alpha(opacity=80); 
    -moz-opacity: 0.8; 
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
    -khtml-opacity: 0.8;
    opacity: 0.8;
    padding-left:5%;
    padding-top:10%;
    padding-bottom:10%;
    bottom:0;
    position: absolute;
    right: 0;
    width: 90%;
}