Richten Sie den Inhalt des div an der unteren

Ich habe ein div mit 2 Absätze. Ich möchte die Absätze ausgerichtet werden unten rechts in der div. Ich war in der Lage, richten Sie die paragrams mit text-align: right, aber ich bin kämpfen mit dem Versuch, die paragrams zu richten an den unteren Rand der div.

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

Versuchte ich mit position:absolute auf die paragrams und Einstellung bottom: 0, aber das macht der Absätze, die einander überlappen, wegen der absoluten Positionierung.

Den div nicht erstrecken sich über die ganze Seite, also den text des Absatzes sollte contrained innerhalb der div.

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

Den Effekt, den ich will, ist, wie diese (photoshopped):
Richten Sie den Inhalt des div an der unteren

Sowie ein Turnschuh von oben: http://jsfiddle.net/cbY6h/

InformationsquelleAutor F21 | 2012-04-29

  1. 19

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

    Wird der Inhalt in der unteren rechten Ecke des div. Sehen Sie sich das Ergebnis auf http://jsfiddle.net/cbY6h/1/.

    Einstellung der position auf absolute, nahm Sie es aus der Strömung und die Ergebnisse in die Inhalte der Absätze überlappenden andere Inhalte 🙁 Die Breite der box sollte nicht fixiert werden wie die vorhergehenden divs können beliebigen Breite, aber es ist contrainted zu passen, in der Eltern nach den breiten der Geschwister berücksichtigt worden.
    Bill ' s Antwort scheint zu befriedigen, die Bedingungen Ihrer Frage. Wenn es gibt andere Faktoren, die berücksichtigt werden müssen, bitte Bearbeiten Sie die Frage entsprechend.
    ausgezeichnete Antwort +1

    InformationsquelleAutor Bill

  2. 3

    War ich auf der Suche nach etwas ähnliches, und landete mit flexbox-layout.

    Angesichts der folgenden Struktur

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

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

    Erhalten Sie das layout aus dem Bild.

    Edit: funktioniert nicht auf älteren Browsern (http://caniuse.com/flexbox). Sie können Taste Modernizer

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

    InformationsquelleAutor Frison Alexander

  3. 1

    Einer key-note zu verstehen. Wenn Sie waren zu ändern, die Höhe der "box" zu 100% statt 100px, dann würde es nicht funktionieren. Wenn die Höhe ist nicht angegeben, wie eine spezifische Maßeinheit kann es nicht herausfinden, wie das absolute Kind Element.

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

    InformationsquelleAutor Blake

  4. -1

    Verwenden Sie relative anstelle von absoluten für die position .content.

    InformationsquelleAutor Daniel Brennan

Schreibe einen Kommentar