Question

我正在处理bootstrap缩略图容器图像，我需要在图像的右下角定位产品的价格。但是，当图像大小小于容器大小时，我使用的方法似乎失败了。

当前相对于最外层div的绝对定位。但是，我希望相对于图像的绝对定位。

注意：它是一个具有固定大小图像的响应式缩略图div。

＆＃13;

.img-holder {
  position: relative;
}

.price-container {
  position: absolute;
  right: 0;
  bottom: 0;
  background-color: red;
}

＆＃13;

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="row">
  <div class="col-sm-6 col-md-4">
    <div class="thumbnail">
      <div class="img-holder">
        <img src="http://dummyimage.com/330x200/000/fff" alt="...">
        <div class="price-container">
          USD 5.00
        </div>
      </div>
      <div class="caption">
        <h3>Thumbnail label</h3>
        <p>...</p>
        <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
      </div>
    </div>
  </div>

＆＃13;

Answer 1

尝试将display: inline-block添加到img-holder

.thumbnail {
   text-align: center;
 }

.img-holder {
  position: relative;
  display: inline-block;
  text-align: center;
}

.img-holder img {
  max-width: 100%;
}

.price-container {
  position: absolute;
  right: 0;
  bottom: 0;
  background-color: red;
}

.caption {
  text-align: left;
}

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="row">
  <div class="col-sm-6 col-md-4">
    <div class="thumbnail">
      <div class="img-holder">
        <img src="http://dummyimage.com/330x200/000/fff" alt="...">
        <div class="price-container">
          USD 5.00
        </div>
      </div>
      <div class="caption">
        <h3>Thumbnail label</h3>
        <p>...</p>
        <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
      </div>
    </div>
  </div>

bootstrap缩略图容器图像

1 个答案: