CSS: bagaimana memposisikan elemen di kanan bawah?

101

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

teks alt

css

— keruilin
sumber

Akan lebih mudah jika Anda menunjukkan HTML dan CSS yang Anda miliki saat ini.

— John Hartsock

Tentang menaklukkan CSS, saya sangat merekomendasikan buku berikut books.google.ie/books/about/…

— Philip Murphy

Jawaban:

219

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 tersebut muncul di kanan bawah seperti:

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

Cara kerjanya adalah bahwa elemen yang diposisikan secara mutlak selalu diposisikan sehubungan dengan elemen induk yang diposisikan secara relatif pertama, atau jendela. Karena kita mengatur posisi kotak menjadi relatif, .bet_timeposisikan tepi kanannya ke tepi kanan .boxdan tepi bawahnya ke tepi bawah.box

— Austin Hyde
sumber

Tapi bagaimana mengatasinya jika .boxharus position:absolute? Mustahil?

— Hitam

Anda .boxmasih position:relative.

— Hitam

.box2adalahposition:absolute

— Austin Hyde

Anda mungkin perlu menyetel orang tua menjadidisplay:inline-block;

— BillyNair

wadah harus relatif, dan konten di dalamnya harus mutlak untuk pemosisian, brilian! terima kasih

— Haryono Sariputra

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

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

Jika Anda perlu memberi spasi teks lebih jauh dari tepi, Anda dapat mengubah 0ke 2pxatau serupa.

— Mohon Berdiri
sumber