CSS에서 Div의 오른쪽 하단에 있는 이미지 주위에 텍스트 줄 바꿈을 만들려면 어떻게 해야 합니까?

오른쪽 하단 Div를 둘러싸도록 텍스트 스타일 지정

CSS에서는 이미지를 오른쪽 하단에 배치하는 것이 바람직한 경우가 많습니다. 콘텐츠 div의 모서리를 텍스트로 깔끔하게 감싸도록 합니다. 겉으로는 단순해 보이는 이 작업에는 문제가 있을 수 있지만 원하는 효과를 얻기 위한 여러 가지 접근 방식이 있습니다.

가장 어려운 점은 콘텐츠 div의 하단과 이미지를 정렬하기 위해 이미지 위에 필요한 공간의 정확한 양을 결정하는 것입니다. . 수년에 걸쳐 다양한 솔루션이 제안되었으며 각각 고유한 한계가 있습니다.

한 가지 방법은 이미지를 오른쪽으로 띄우고 여백 상단을 사용하여 하단에 배치하는 것입니다. 그러나 이로 인해 위에 공백이 생깁니다. 이미지. 또는 절대 위치 지정을 사용할 수 있지만 이렇게 하면 이미지가 텍스트 위나 아래에 배치됩니다.

대체 접근 방식

이러한 제한을 극복하기 위해 대체 접근 방식이 등장했습니다.

1. JavaScript 기반 해결 방법:
   이 방법은 JavaScript를 사용하여 텍스트 높이를 계산하고 "푸셔" 요소의 높이를 조정하여 텍스트가 이미지 주위를 감싸도록 합니다.
2. 플로팅 수직 "푸셔":
   이 기술에는 이미지 옆에 수직 "푸셔" 요소를 띄우는 것이 포함됩니다. "푸셔" 요소의 높이를 조작하여 텍스트를 둘러쌀 공간을 원하는 만큼 만들 수 있습니다.
3. CSS :before Selector:
   이 방법은 CSS를 활용합니다. 선택기 앞에 이미지 주위의 텍스트 흐름을 제어하는 ​​"지우기" 요소를 만듭니다. 이는 콘텐츠 div의 높이를 조작하는 것보다 더 우아한 솔루션을 제공합니다.
4. Flexbox 및 Shape-outside:
   이 현대적인 접근 방식은 Flexbox와 Shape-Outside 속성을 결합하여 원하는 효과를 얻습니다. . Flexbox를 사용하면 요소를 유연하게 정렬할 수 있으며, 외부 모양은 텍스트를 둘러쌀 수 있는 컨테이너의 모양을 정의합니다. 그러나 이전 버전과의 호환성을 고려해야 합니다.

이상적인 접근 방식은 프로젝트의 특정 요구 사항과 제한 사항에 따라 다릅니다. 그러나 이러한 방법은 원하는 레이아웃을 달성하기 위한 견고한 기반을 제공합니다.

위 내용은 CSS에서 Div의 오른쪽 하단에 있는 이미지 주위에 텍스트 줄 바꿈을 만들려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!