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位置。然后，您可以使用bottom的{{1}}属性在span内调整其高度。

<强> HTML

div

<强> CSS

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

工作示例 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>

对齐Div文本底部

3 个答案: