Bootstrap 3对齐

Question

我做了一个缩略图。 请查看所提供的图像。

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

我希望NHU按钮应该与图像重叠。 我怎么做？ 另外，在从底部20px开始的图片上方应该有一条黑色的半透明小条。

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