Text nach unten von Div

Question

Gibt es eine Möglichkeit, den Inhalt Text eines div auf den Grund davon zu bekommen? Hier habe ich ein Beispiel vorbereitet.

http://jsfiddle.net/JGuP7/

Dies ist die Probe Hierarchie:

<div class="button">Button Label</div> 

Ich versuche, das Ergebnis zu erzielen, ohne zusätzliche Spannweiten das Hinzufügen oder die Hierarchie ändern.

Answer 1

Drei mögliche Lösungen, obwohl jeder seine eigenen Vorbehalte hat.

jsFiddle demo

Die erste Lösung basiert auf line-height: 220px; vertical-align: bottom; den Text mit dem Boden der DIV auszurichten. Die zweite Lösung erstellt ein :before psuedo-Element, das den Text an den unteren Rand des DIV (das erfordert kein zusätzliches Markup) schiebt. Beide Lösungen in IE7 oder früher scheitern, und beide werden Probleme haben, wenn:

• Die Schriftgröße ändert
• Der Text auf eine zweite Zeile umbrochen
• Die Größe des umschließenden Elements ändert

Die dritte Lösung basiert auf der Eigenschaft display: box;, bei der es sich um eine CSS-Eigenschaft handelt, die ausläuft (mehr Details unter Quick Hits With the Flexible Box Model). Diese Lösung wird nur von Chrome seit v4, Firefox seit v2 und IE10 beta unterstützt. Ein neuer Flexbox-Standard wurde zwar standardisiert, die Browserunterstützung ist jedoch minimal. Diese Lösung könnte als "zu neu" angesehen werden, um effektiv verwendet zu werden (html5please.com/#flexbox).

Im Allgemeinen sollten Sie ein neues Verpackungselement um Ihren Text herum betrachten, das es ermöglicht, das Element position: absolute; bottom: 0; unten auf dem übergeordneten Element zu kaschieren. Dies hat den Vorteil, dass das untergeordnete Element nach oben wächst, wenn die Schriftgröße oder Textlänge zunimmt, und unabhängig von den Abmessungen des übergeordneten Containers ist. Abhängig davon, wie wichtig Ihre Positionierung für Ihr Layout ist, können Sie dieses neue Element mit Javascript hinzufügen.Dies ist wahrscheinlich nicht ideal für die Frage, die Sie gestellt haben, aber Browser-Unterstützung ist nicht weniger als ideal für die verrückten CSS-Lösungen, die ich oben aufgeführt habe: -p

Answer 2

Wenn Sie position:relative im Behälter verwenden und

position:absolute; 
bottom:0; 

im Inhalt verwenden, können Sie das gewünschte Ergebnis erzielen.

Ihre CSS könnte wie folgt aussehen:

.button 
    { 
     display: block; 
     background-color: darkred; 
     color: white; 
     width: 120px; 
     height: 120px; 
     text-align: center; 
     position: relative; 
    } 
    .bottomContent 
    { 
     position:absolute; 
     bottom: 0; 
    } 

und Ihre HTML:

<div class="button"><p class="bottomContent">Button Label</p></div> 

Source

Answer 3

Eine andere Möglichkeit, dies durch den Einsatz wäre zu tun "display: table-cell" und "vertikal ausrichten: unten".

http://jsfiddle.net/JGuP7/1/

.button { 
    display: table-cell; 
    background-color: darkred; 
    color: white; 
    width: 120px; 
    height: 120px; 
    text-align: center; 
    vertical-align: bottom; 
}