html - Bootstrap 3 对齐

Question

我制作了一个缩略图。请查看提供的图片。

![在此处输入图片描述][1]

我希望按钮 N H U 应该与图像重叠。我怎么做？另外，在距离底部 20 像素的图像上应该有一个黑色的半透明小条。

<div class="thumbnail">
    <div class="caption">
        <p class="product_title">{{deal.title}}</p>
        <p class="product_price">&#8377  {{deal.buyout_price}}</p>
    </div>
    <div class="pull-left" style="padding-top:20px;">
        <img src="{% static "images/p.png" %}" alt="New Product"><br>
        <img src="{% static "images/p.png" %}" alt="New Product"><br>
        <img src="{% static "images/p.png" %}" alt="New Product">
    </div>
    <img src="media/auction/Screenshot_from_2015-05-18_235741.png" alt="..." class="thumbnail-img deals_padding">
</div>

CSS

.deals_padding{
  padding-left: 0px;
  padding-top: -20px;
  width: 80%;
}

Answer 1

如果我没看错你的代码，你需要做几件事:

<div class="thumbnail">
    <div class="caption">
        <p class="product_title">{{deal.title}}</p>
        <p class="product_price">&#8377  {{deal.buyout_price}}</p>
    </div>
    <div class="pull-left" style="padding-top:20px;">
        <img src="{% static "images/np.png" %}" alt="New Product"><br>
        <img src="{% static "images/hp.png" %}" alt="New Product"><br>
        <img src="{% static "images/up.png" %}" alt="New Product">
    </div>
    <img src="media/auction/Screenshot_from_2015-05-18_235741.png" alt="..." class="thumbnail-img deals_padding">
</div>


.thumbnail{
   position: relative;
}

.thumbnail .pull-left{ 
   position: absolute;
   left: 0px;
   top: 0px;
   bottom: 0px;
}

.caption{
  position: absolute;
  bottom: 0px;
  height: 20px;
  left: 0px;
  right: 0px;
}