CSS : 오른쪽 하단에 요소를 배치하는 방법은 무엇입니까?

101

오른쪽 하단에 "Bet 5 days ago"라는 텍스트 요소를 배치하려고합니다. 어떻게 할 수 있습니까? 그리고 더 중요한 것은 CSS를 정복 할 수 있도록 설명해주세요!

대체 텍스트

css

— Keruilin
소스

현재 가지고있는 HTML과 CSS를 보여 주면 더 쉬울 것입니다.

— John Hartsock

CSS 정복에 대해 다음 책을 적극 추천합니다. books.google.ie/books/about/…

— Philip Murphy

답변:

219

HTML이 다음과 같다고 가정 해 보겠습니다.

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

그런 다음 CSS를 사용하여 해당 텍스트를 다음과 같이 오른쪽 하단에 표시 할 수 있습니다.

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

이것이 작동하는 방식은 절대적으로 배치 된 요소가 항상 상대적으로 배치 된 첫 번째 상위 요소 또는 창에 대해 배치된다는 것입니다. 상자의 위치를 상대 위치로 설정했기 때문에 상자의 .bet_time오른쪽 가장자리를 오른쪽 가장자리에 .box, 아래쪽 가장자리를 아래쪽 가장자리에 배치합니다..box

— 오스틴 하이드
소스

하지만 .box그 자체 로 해결해야한다면 어떻게해야 position:absolute할까요? 불가능한?

— Black

당신 .box은 여전히 position:relative입니다.

— Black

.box2isposition:absolute

— Austin Hyde

당신은 할 부모를 설정해야 할 수 있습니다display:inline-block;

— BillyNair

컨테이너는 상대적이어야하며 그 안의 내용은 위치를 결정하기 위해 절대적이어야합니다. 감사

— Haryono Sariputra

position: relative;상자에 CSS 를 설정합니다 . 이로 인해 내부 개체의 모든 절대 위치는 해당 상자의 모서리를 기준으로합니다. 그런 다음 "Bet 5 days ago"줄에 다음 CSS를 설정합니다.

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

당신이 공간을 필요로하는 텍스트 멀리 떨어진 가장자리에서, 당신은 변경 될 수 있습니다 0에 2px또는 이와 유사한.

— PleaseStand
소스