出于某种原因,我无法让此 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;
最佳答案
将内容包装在绝对定位的 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;
}
关于html - 对齐 Div 文本底部,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17846845/