텍스트 줄 바꿈을 유지하면서 컨테이너 오른쪽 하단에 Div를 배치하려면 어떻게 해야 합니까?

컨테이너 하단에 Div 배치: 종합 가이드

float:right 또는 float를 사용하여 컨테이너 상단에 부동 요소 배치 :left는 웹 디자인의 일반적인 관행입니다. 그러나 플로팅 요소와 관련된 자연스러운 텍스트 줄 바꿈 동작(위쪽과 왼쪽으로 텍스트 줄 바꿈)을 유지하면서 div를 컨테이너의 오른쪽 하단에 플로팅해야 하는 경우 작업이 어려워 보일 수 있습니다.

처음에는 float 속성에 대한 최저 값이 없음에도 불구하고 이 작업이 간단해야 한다고 가정할 수 있습니다. 그러나 다양한 기술을 탐색하고 웹을 조사한 결과 유일하게 실행 가능한 솔루션은 절대 위치 지정과 관련된 것으로 보일 수 있습니다. 그러나 이 접근 방식은 원하는 텍스트 줄 바꿈 동작을 희생합니다.

대중적인 믿음과는 달리 이 디자인 패턴은 보기만큼 드물지 않습니다. 원하는 결과를 얻으려면 두 가지 접근 방식을 사용해야 합니다.

1. 상위 div의 위치를 ​​상대 위치로 설정: 이는 상위 div 내에 상대 좌표계를 설정합니다.

2. 내부 div의 위치 지정 속성 설정: 다음 CSS 속성을 내부 div에 적용합니다. div:

   • 위치: 절대;: 상위 컨테이너 내에서 div의 위치를 ​​절대적으로 지정합니다.
   • 하단: 0;: 상위 div의 하단에 div를 고정합니다.

예시 구현:

<div class="parent-div">
<pre class="brush:php;toolbar:false">.parent-div {
  position: relative;  
}

.inner-div {
  position: absolute;
  bottom: 0;
}

이 접근 방식은 내부 div를 상위 컨테이너의 오른쪽 하단 모서리에 효과적으로 부동시켜 원하는 텍스트 줄바꿈 동작을 유지합니다.