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
8
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
26

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