CSS: làm thế nào để định vị phần tử ở phía dưới bên phải?

101

Tôi đang cố gắng định vị phần tử văn bản "Đặt cược 5 ngày trước" ở góc dưới bên phải. Làm thế nào tôi có thể thực hiện điều này? Và, quan trọng hơn, hãy giải thích để tôi có thể chinh phục CSS!

văn bản thay thế

css

— keruilin
nguồn

Sẽ dễ dàng hơn nếu bạn cho chúng tôi xem HTML và CSS mà bạn hiện có.

— John Hartsock

Mở chinh phục CSS, tôi rất muốn giới thiệu cuốn sách sau books.google.ie/books/about/...

— Philip Murphy

Câu trả lời:

218

Giả sử HTML của bạn trông giống như sau:

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

Sau đó, với CSS, bạn có thể làm cho văn bản đó xuất hiện ở dưới cùng bên phải như sau:

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

Cách hoạt động của điều này là các phần tử được định vị tuyệt đối luôn được định vị đối với phần tử mẹ được định vị tương đối đầu tiên hoặc cửa sổ. Vì chúng tôi đặt vị trí của hộp là tương đối, nên .bet_timeđặt cạnh phải của nó với cạnh phải .boxvà cạnh dưới của nó thành cạnh dưới của.box

— Austin Hyde
nguồn

Nhưng làm thế nào để giải quyết nó nếu .boxchính nó phải được position:absolute? Không thể nào?

— Black

Của bạn .boxvẫn là position:relative.

— Đen

.box2làposition:absolute

— Austin Hyde

Bạn có thể cần phải thiết lập các mẹ đượcdisplay:inline-block;

— BillyNair

vùng chứa phải tương đối và nội dung trong đó phải tuyệt đối để định vị, tuyệt vời! cảm ơn

— Haryono Sariputra

Đặt CSS position: relative;trên hộp. Điều này làm cho tất cả các vị trí tuyệt đối của các đối tượng bên trong tương đối với các góc của hộp đó. Sau đó, đặt CSS sau trên dòng "Đặt cược 5 ngày trước":

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

Nếu bạn cần khoảng cách văn bản xa mép hơn, bạn có thể thay đổi 0thành 2pxhoặc tương tự.

— PleaseStand
nguồn