css - 将 div 的内容对齐到底部

Question

我有一个包含 2 个段落的 div。我希望段落与 div 的右下角对齐。我能够使用 text-align: right 对齐段落，但我正在努力尝试让段落对齐到 div 的底部。

标记非常简单:

<div>
   <p>content 1</p>
   <p>content 2</p>
</div>

CSS:

div{
    border: 1px red solid;
    height: 100px;
}

p{
    text-align: right;
}

我尝试在段落上使用 position:absolute 并设置 bottom: 0，但这会使段落由于绝对定位而相互重叠。

div 不会跨越整个页面，因此段落文本应限制在 div 内。

有没有办法实现内容“从底部增长”的效果？

我想要的效果是这样的(photoshop):

还有上面的 fiddle :http://jsfiddle.net/cbY6h/

Answer 1

HTML

<div class="box">
   <div class="content">
       <p>content 1</p>
       <p>content 2</p>
   </div>
</div>​​​​​​​​​​​​​​​​​​​​​

CSS

.box {
    border: 1px red solid;
    height: 100px;
    position: relative;
}

.content {
    position: absolute;
    bottom: 0;
    right: 0;
}

将内容放在 div 的右下角。您可以在 http://jsfiddle.net/cbY6h/1/ 查看结果.