html - 对齐 Div 文本底部

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 的文本垂直对齐到底部。

编辑:我尝试了以下方法:

添加到 .product

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

Answer 1

将内容包装在绝对定位的 span 标签中。然后将 div 设置为 relative 位置。然后，您可以使用 span 的 bottom 属性来调整其在 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/