Frage CSS: Wie positioniere ich Element unten rechts?


Ich versuche das Textelement "Bet 5 Tage" in der unteren rechten Ecke zu platzieren. Wie kann ich das erreichen? Und, noch wichtiger, erkläre bitte, damit ich CSS erobern kann!

alt text


75
2017-10-18 01:13


Ursprung


Antworten:


Nehmen wir an, Ihr HTML sieht ungefähr so ​​aus:

<div class="box">
    <!-- stuff -->
    <p class="bet_time">Bet 5 days ago</p>
</div>

Dann können Sie mit CSS den Text unten rechts wie folgt erscheinen lassen:

.box {
    position:relative;
}
.bet_time {
    position:absolute;
    bottom:0;
    right:0;
}

Die Funktionsweise besteht darin, dass absolut positionierte Elemente immer in Bezug auf das erste relativ positionierte Elternelement oder das Fenster positioniert sind. Weil wir die Position der Box relativieren, .bet_time positioniert seine rechte Kante an die rechte Kante von .box und seine Unterkante bis zur Unterkante von .box


160
2017-10-18 01:21



Stellen Sie das CSS ein position: relative; auf der Box. Dies führt dazu, dass alle absoluten Positionen von Objekten innerhalb relativ zu den Ecken dieser Box sind. Dann setze das folgende CSS auf die Zeile "Bet 5 days ago":

position: absolute;
bottom: 0;
right: 0;

Wenn Sie den Text weiter von der Kante entfernt platzieren möchten, können Sie dies ändern 0 zu 2px o.ä.


18
2017-10-18 01:18