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

问题描述

我有一个div包含2段。我想让段落对齐到div的右下角。我可以使用 text-align：right 来对齐paragram，但是我试图让paragram与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;
}

我尝试使用 position：absolute ，并设置 bottom：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内。

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

我想要的效果是这样的（photoshopped）：

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/ 查看结果。

Will place the content in the bottom right hand corner of the div. You can see the result at http://jsfiddle.net/cbY6h/1/.

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