Bootstrap 3 Выравнивание

Question

Я сделал эскиз. Пожалуйста, ознакомьтесь с представленным изображением.

! [Введите описание изображения здесь] [1]

Я хочу, чтобы кнопки N H U должен перекрывать изображение. Как мне это сделать? Плюс должна быть маленькая черная полупрозрачная полоса над изображением 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; 
}