Pertanyaan CSS: bagaimana cara menempatkan elemen di kanan bawah?


Saya mencoba memposisikan elemen teks "Taruhan 5 hari yang lalu" di sudut kanan bawah. Bagaimana saya bisa mencapai ini? Dan, yang lebih penting, tolong jelaskan jadi saya bisa menaklukkan CSS!

alt text


75
2017-10-18 01:13


asal


Jawaban:


Katakanlah HTML Anda terlihat seperti ini:

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

Kemudian, dengan CSS, Anda dapat membuat teks itu muncul di kanan bawah seperti ini:

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

Cara kerjanya adalah bahwa elemen-elemen yang diposisikan secara mutlak selalu diposisikan sehubungan dengan elemen induk pertama yang relatif terposisikan, atau jendela. Karena kita mengatur posisi kotak menjadi relatif, .bet_time posisi tepi kanan ke tepi kanan .box dan ujung bawahnya ke tepi bawah .box


160
2017-10-18 01:21



Atur CSS position: relative; di kotak. Ini menyebabkan semua posisi absolut dari objek di dalam menjadi relatif terhadap sudut kotak itu. Kemudian tetapkan CSS berikut pada baris "Bertaruh 5 hari yang lalu":

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

Jika Anda perlu spasi teks lebih jauh dari tepi, Anda bisa berubah 0 untuk 2px atau serupa.


18
2017-10-18 01:18