Выравнивание текста текста внизу

Question

По какой-то причине я не могу получить этот текст div, чтобы по вертикали выровнять нижнюю часть. Я пробовал практически все, кроме решений, содержащих обширный код.

.products { 
width: 191.25px; 
height: 191.25px; 
margin-left: 15px; 
margin-bottom: 15px; 
padding: 15px; 
background: black; 
color: white; 
float: left; 
text-align: right; 
} 

<h2>Header Two</h2> 
<div class="products">Content for class "products" Goes Here</div> 
<div class="products">Content for class "products" Goes Here</div> 
<div class="products">Content for class "products" Goes Here</div> 
<div class="products">Content for class "products" Goes Here</div> 

Если кто-то может помочь мне исправить мой код так, чтобы вертикально выровнять текст div «s на дно.

EDIT: Я попытался следующие:

Добавление к .product

display: table-cell; 
vertical-align: bottom; 

Answer 1

Wrap содержание в абсолютно позиционированного span тега. Затем установите div в положение relative. Затем вы можете использовать свойство bottomspan для регулировки его высоты в пределах div.

HTML

<h2>Header Two</h2> 
<div class="products"><span>Content for class "products" Goes Here</span></div> 
<div class="products"><span>Content for class "products" Goes Here</span></div> 
<div class="products"><span>Content for class "products" Goes Here</span></div> 
<div class="products"><span>Content for class "products" Goes Here</span></div> 

CSS

.products { 
width: 191.25px; 
height: 191.25px; 
margin-left: 15px; 
margin-bottom: 15px; 
padding: 15px; 
background: black; 
color: white; 
float: left; 
text-align: right; 
position:relative; /** Added **/ 
} 

/** New Style **/ 
.products span{ 
    position: absolute; 
    bottom: 0px; 
    left: 0px; 
    padding: 15px;  
} 

Рабочий примерhttp://jsfiddle.net/wD4yJ/

Answer 2

, что о придании тексту другой DIV?

Я изменил свое расположение немного

<h2>Header Two</h2> 
<div class="products"><div class="inner">Content for class "products" Goes Here</div></div> 
<div class="products"><div class="inner">Content for class "products" Goes Here</div></div> 
<div class="products"><div class="inner">Content for class "products" Goes Here</div></div> 
<div class="products"><div class="inner">Content for class "products" Goes Here</div></div> 

И добавили эти роли в дополнительные к вашему:

.products { 
display: table; 
} 
.inner{ 
display: table-cell; 
vertical-align: bottom; 
} 

Answer 3

Для того, чтобы выровнять текст в нижней части вам потребуется отдельный класс для самого текста. Я бы предложил поместить текст в тег абзаца и позицию в div везде, где вы хотите.

Working Example Here

<div class="products"> 
    <p class="bottom">Content for class "products" Goes Here</p> 
</div>