对齐的div内容的底部(Align contents of div to the bottom)

我有一个包含2个段落一个div。 我想段落对齐到div的右下角。 我能够对齐使用paragrams text-align: right ，但我试图让该paragrams对齐到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的paragrams和设置bottom: 0 ，但是这使得各段彼此重叠，由于绝对定位。

股利不跨越整个页面，这样的段落文本应该在div内contrained。

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

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

和上面的小提琴： 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/ 。

Answer 2:

我一直在寻找类似的东西，并最终使用Flexbox的布局。

鉴于以下结构

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

而这种风格

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

    display: flex;

    //align items from top to bottom 
    //[I've always thought the opposite, as rows are counted from top to bottom 
    //and columns are counted left to right. Any one have an explanation for this?]
    flex-direction: column;   

    //main axis align to the bottom, since we are using column for direction
    justify-content: flex-end; 

}

p { 
   //cross axis align towards the right. total outcome => bottom right
   align-self: flex-end; 
}

你会得到从画面布局。

编辑：不会工作在旧的浏览器（ http://caniuse.com/flexbox ）。 您可以键入近代化的

.flexbox .rest-of-your-selector { rule }

Answer 3:

一个关键的音符理解。 如果你要改变“盒子”为100％，而不是100像素的高度，那么就不会工作。 如果高度不指定为测量的特定单位，因此它无法弄清楚如何将绝对子项。

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

Answer 4:

使用相对而不是绝对的。内容的位置。

文章来源: Align contents of div to the bottom