內部div未定位到右下方

我有一個Bootstrap網格列嵌套有兩個div：父div是圖像，子div是不透明的顏色。我試圖將子div對齊到父div的右下角。但是，當我爲此對齊應用絕對定位時，整個div不恰當地向上移動。有關如何防止此向上移動的任何建議仍將子div（oqaque-7）對齊到父div（col-md-4）的右下角。內部div未定位到右下方

的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; 
     }

來源

2016-07-20 sam_smith

你需要的子元素本身相對於父DIV，而不是HTML頁面的主體定位。將position:relative;添加到父元素的CSS。

來源

2016-07-20 20:39:17 tnschmidt

我將這行代碼添加到'＃col-7'並且子div沒有向右移動。我在一個不同的嘗試中將這行代碼添加到'.row-eq-height'中，並且該孩子沒有向右移動。孩子div在底部，但不是右下角。 –

給它'right：0;'（而不是'float：right'） – tnschmidt

你必須發佈一個鏈接到你的工作代碼的小提琴到目前爲止，以便進一步排除故障。 – tnschmidt

您可能希望將兒童的寬度設置爲90％，刪除孩子上的浮動和邊緣頂部。看到這個：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%; 
}

來源

2016-07-20 20:49:59 GunWanderer

仍然向上移動整個子div。 –

內部div未定位到右下方

回答

相關問題