0

For someone reason I can't get this div's text to vertically align to the bottom I've tried just about everything except for solutions involving extensive code.

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

If someone could help me fix my code so to vertically align the div's text to the bottom.

EDIT: I have tried the following:

Adding to .product

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

3 回答 3

3

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

于 2013-07-25T00:07:51.767 回答
0

为了使文本与底部对齐，您需要为文本本身创建一个单独的类。我建议将文本放在段落标签上，并在 div 中的任何位置放置。

这里的工作示例

<div class="products">
    <p class="bottom">Content for class "products" Goes Here</p>
</div>
于 2013-07-25T00:16:17.437 回答
0

给文本另一个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;
}
于 2013-07-25T00:09:47.990 回答