Inhalt von div nach unten ausrichten

Question

Ich habe ein div mit 2 Absätzen. Ich möchte, dass die Absätze unten rechts vom div ausgerichtet sind. Ich war in der Lage, die Paragrafen mit text-align: right auszurichten, aber ich habe mit dem Versuch zu kämpfen, um die Paragrafen auf der Unterseite des div auszurichten.

Das Markup ist ganz einfach:

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

CSS:

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

p{ 
    text-align: right; 
} 

Ich versuchte position:absolute auf den paragrams mit und Einstellung bottom: 0, aber das macht die Absätze überlappen einander aufgrund der absoluten Positionierung .

Das div erstreckt sich nicht über die ganze Seite, daher sollte der Absatztext innerhalb der div.

Gibt es eine Möglichkeit, den Effekt so zu erreichen, dass der Inhalt "von unten wächst"?

Der Effekt, den ich will, ist wie folgt (photos):

Und eine Geige des oben: 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; 
} 

Will Platziere den Inhalt im Botto m rechte Ecke des Div. Sie können das Ergebnis unter http://jsfiddle.net/cbY6h/1/ sehen.

Answer 2

Verwenden Sie relative statt absolute für die Position von .content.

Answer 3

Eine wichtige Anmerkung zu verstehen. Wenn Sie die Höhe der "Box" auf 100% anstelle von 100px ändern würden, würde es nicht funktionieren. Wenn height nicht als eine bestimmte Maßeinheit angegeben ist, kann sie nicht herausfinden, wie das absolute untergeordnete Element platziert wird.

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

Answer 4

Ich war auf der Suche nach etwas ähnlichem und endete mit dem Flexbox-Layout.

die folgende Struktur gegeben

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

und diesen Stil

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; 
} 

Sie das Layout aus dem Bild.

Edit: Funktioniert nicht mit älteren Browsern (http://caniuse.com/flexbox). Sie können Schlüssel Modernisierer

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