格的内容对齐底部 [英] Align contents of div to the bottom

问题描述

我有一个包含2款股利。我想的段落对齐到div的右下角。我可以使用文本对齐对齐paragrams：权，但我挣扎着试图让paragrams对齐到div底部

I have a div containing 2 paragraphs. I want the paragraphs to be aligned to the bottom right of the div. I was able to align the paragrams using text-align: right, but I am struggling with trying to get the paragrams to align to the bottom of the div.

该标记是相当简单：

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

CSS：

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

p{
    text-align: right;
}

我试图用的位置是：绝对的paragrams和设置底部：0 ，但是这使得各段重叠彼此由于绝对定位

I tried using position:absolute on the paragrams and setting bottom: 0, but this makes the paragraphs overlap each other due to the absolute positioning.

DIV的不跨越整个页面，因此该段文字应在div内contrained。

The div does not span the whole page, so the paragraph text should be contrained within the div.

有没有办法实现这样的内容的增长从底部？

Is there a way to achieve the effect such that the content "grows from the bottom"?

我想要的效果是这样的（Photoshop处理）：

The effect I want is like this (photoshopped):

和上面的小提琴： http://jsfiddle.net/cbY6h/

推荐答案

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

这篇关于格的内容对齐底部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！