CSS: Sağ alttaki öğe nasıl konumlandırılır?

101

Sağ alt köşede "5 gün önce bahis yap" metin öğesini konumlandırmaya çalışıyorum. Bunu nasıl başarabilirim? Ve daha da önemlisi, CSS'yi fethedebilmem için lütfen açıklayın!

alternatif metin

css

— Keruilin
kaynak

Bize şu anda sahip olduğunuz HTML ve CSS'nizi gösterirseniz daha kolay olur.

— John Hartsock

CSS'yi fethederken, aşağıdaki kitap kitaplarını şiddetle tavsiye ederim books.google.ie/books/about/…

— Philip Murphy

Yanıtlar:

219

HTML'nizin şuna benzer olduğunu söyleyelim:

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

Ardından, CSS ile bu metnin sağ altta görünmesini sağlayabilirsiniz:

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

Bunun çalışma şekli, mutlak konumlandırılmış elemanların her zaman görece olarak konumlandırılmış birinci ana elemana veya pencereye göre konumlandırılmasıdır. Kutunun konumunu göreceli olarak ayarladığımız için .bet_time, sağ kenarını sağ kenarına .boxve alt kenarını şunun alt kenarına konumlandırıyoruz..box

— Austin Hyde
kaynak

Peki .boxkendisi olması gerekiyorsa nasıl çözülür position:absolute? İmkansız mı?

— Kara

.boxHala senin position:relative.

— Siyah

.box2isposition:absolute

— Austin Hyde

Ebeveyni şu şekilde ayarlamanız gerekebilirdisplay:inline-block;

— BillyNair

kapsayıcı göreceli olmalı ve içindeki içerik konumlandırma için mutlak olmalıdır, harika! teşekkürler

— Haryono Sariputra

CSS'yi position: relative;kutuya ayarlayın . Bu, içindeki nesnelerin tüm mutlak konumlarının o kutunun köşelerine göre olmasına neden olur. Ardından "5 gün önce bahis yap" satırında aşağıdaki CSS'yi ayarlayın:

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

Uzayda gereken metin daha uzak kenarından varsa, değişebilir 0için 2pxya da benzer.

— Lütfen ayakta dur
kaynak