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内に制限する必要があります。

コンテンツが「下から成長する」ような効果を実現する方法はありますか？

私が欲しい効果はこのようなものです（フォトショップ）：

そして、上記のフィドル：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

私は似たようなものを探していて、結局フレックスボックスレイアウトを使用しました。

次の構造が与えられます

<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

理解するためのキーノート。「ボックス」の高さを100pxではなく100％に変更すると、機能しなくなります。高さが特定の測定単位として指定されていない場合、絶対子アイテムを配置する方法を理解できません。

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

Answer 4

.contentの位置には、absoluteではなくrelativeを使用します。