Question

我有一个嵌套有两个div的Bootstrap网格列：父div是一个图像，子div是一个不透明的颜色。我试图将子div与父div的右下角对齐。但是，当我对此对齐应用绝对定位时，整个div不适当地向上移动。有关如何防止此向上移动的任何建议，但仍将子div（require('path/to/connect.php');）与父div（oqaque-7）的右下角对齐。

HTML：

col-md-4

CSS：

<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-->

Answer 1

您可能希望将子项的宽度设为 90％，删除子项上的float和margin-top。请参阅：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%;
}

Answer 2

您需要子元素相对于父div而不是html页面的主体定位自己。将position:relative;添加到父元素的CSS中。

内部div没有定位到右下角

2 个答案: