it-swarm.com.de

Richten Sie den Text am unteren Rand eines Div aus

Ich habe versucht, meinen Text von anderen Posts und Antworten in stackoverflow am Ende eines Div auszurichten. Ich habe gelernt, mit verschiedenen CSS-Eigenschaften damit umzugehen. Aber ich kann es nicht schaffen. Grundsätzlich sieht mein html Code so aus:

<div style='height:200px; float:left; border:1px solid #ff0000; position:relative;'>
   <span style='position:absolute; bottom:0px;'>A Text</span>
</div>

Der Effekt ist, dass ich in FF nur eine vertikale Linie bekomme (das Div in einer reduzierten Weise) und der Text daneben geschrieben wird. Wie kann ich verhindern, dass div zusammenfällt, aber die Breite zum Text passt?

48
parascus

Flex-Lösung

Es ist vollkommen in Ordnung, wenn Sie sich für die Lösung display: table-cell Entscheiden möchten. Aber anstatt es zu hacken, haben wir eine bessere Möglichkeit, dasselbe mit display: flex; Zu erreichen. flex ist etwas, das eine anständige Unterstützung hat.

.wrap {
  height: 200px;
  width: 200px;
  border: 1px solid #aaa;
  margin: 10px;
  display: flex;
}

.wrap span {
  align-self: flex-end;
}
<div class="wrap">
  <span>Align me to the bottom</span>
</div>

Im obigen Beispiel setzen wir zuerst das übergeordnete Element auf display: flex; Und später verwenden wir align-self auf flex-end. Auf diese Weise können Sie das Element an das Ende des übergeordneten Elements flex verschieben.


Alte Lösung (Gültig, wenn Sie nicht bereit sind, flex zu verwenden)

Wenn Sie den Text nach unten ausrichten möchten, müssen Sie dafür nicht so viele Eigenschaften schreiben, es reicht aus, display: table-cell; Mit vertical-align: bottom; Zu verwenden

div {
  display: table-cell;
  vertical-align: bottom;
  border: 1px solid #f00;
  height: 100px;
  width: 100px;
}
<div>Hello</div>

(oder JSFiddle)

92
Mr. Alien

Sie können dies jetzt mit Flexbox justify-content: flex-end jetzt:

div {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  width: 150px;
  height: 150px;
  border: solid 1px red;
}
  
<div>
  Something to align
</div>

Wenden Sie sich an Ihren Caniuse um herauszufinden, ob Flexbox für Sie geeignet ist.

37
Zequez