将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中。

有没有办法达到这样的效果，使内容“从底部增长”？

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

以上的小提琴：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）。你可以使用Modernizer的键

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

Answer 3

要理解的关键注意事项。如果您要将“框”的高度更改为100％而不是100px，那么它将无效。如果未将height指定为特定的度量单位，则无法确定如何放置绝对子项。

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

Answer 4

对.content的位置使用relative而不是absolute。