时间戳

首页 > 解决方案 > 将 div 放在不同宽度的图像中

html - 将 div 放在不同宽度的图像中

问题描述

我试图在所有图像上放置一个始终位于相同位置（右下角）的 div。

我的问题是，如果图像占据 100% 的宽度，则 div 会居中:(

我怎样才能把这个 div 放在图像上，总是在右下角，即使我有不同宽度的图像？

.boxImage {
    flex: 1 1 100%;
    cursor: pointer;
    position: absolute;
    background-color: white;
    background-position: 13px 13px;
    background-repeat: no-repeat;
    height: 50px;
    width: 44%;
    border-radius: 8px;
    opacity: 1;
    top: 91%;
    left: 43%;
    max-width: 250px;
}


<div class="d">
    <div class="a">
      <img class="img-fluid" src="https://i.ibb.co/mqnwwKB/Screenshot-72.jpg">
      <!-- <img class="img-fluid Images" src="https://i.ibb.co/3p3D4h6/dmitry-bayer-276d-F1-RG67-Q-unsplash.jpg"> -->
  <div class="row b">       
    <ul class="list-inline rating-list" *ngFor="let star of stars" style="display: inline-block">
      <li (click)="countStar(star)" [ngClass]="{'selected': (star <= selectedValue)}">
        <i class="fa fa-star"></i>
      </li>
    </ul>
  </div>
    </div>
  </div>

标签： htmlcssangulartypescript

解决方案

在您的 css 文件中添加以下类。这将使您的白框相对于图像的位置。 

.abc{
    position: relative;
    display: inline-block;
}
.abc .boxImage{
    position: absolute;
    right: 5px;
    bottom: 5px;
}

工作演示：链接

推荐阅读