HTML 및 CSS에서 텍스트 줄 바꿈을 사용하여 이미지를 오른쪽 하단에 어떻게 띄울 수 있습니까?

텍스트 줄바꿈으로 이미지 띄우기: 종합 가이드

HTML 및 CSS에서 이미지를 텍스트 옆에 배치하는 것은 어려울 수 있습니다. 특히 이미지를 플로팅하려는 경우에는 더욱 그렇습니다. 오른쪽 하단과 그 주위를 둘러쌀 텍스트입니다. 이 문서에서는 스페이서 요소와 JavaScript를 사용하여 이 효과를 얻는 방법을 살펴봅니다.

스페이서 요소 생성

이미지를 페이지 하단으로 푸시하려면 float가 있는 spacer 요소: 오른쪽 및 콘텐츠와 이미지의 차이와 동일한 높이 높이:

<div class="spacer"></div>
<img class="bottomRight" src="" />

CSS 스타일

다음 CSS 스타일을 사용하세요.

.spacer {
  float: right;
  width: 0px;
}
.bottomRight {
  float: right;
  clear: right;
}

스페이서 높이 계산

이미지의 위치를 ​​정확하게 지정하려면 JavaScript를 사용하여 스페이서의 높이. 이 함수는 공백 요소를 인수로 사용합니다.

function sizeSpacer(spacer) {
  var container = spacer.parentNode;
  var img = spacer.nextElementSibling || spacer.nextSibling;
  var lastContentNode = container.children[container.children.length - 1];
  var h = Math.max(0, container.clientHeight - img.clientHeight);
  var imgBottom = img.getBoundingClientRect().bottom;
  var lastContentBottom = lastContentNode.getBoundingClientRect().bottom;

  // Adjust spacer height to align with content bottom
  while (h > 0 && imgBottom > lastContentBottom) {
    spacer.style.height = --h + "px";
    imgBottom = img.getBoundingClientRect().bottom;
    lastContentBottom = lastContentNode.getBoundingClientRect().bottom;
  }

  if (lastContentBottom > imgBottom) {
    spacer.style.height = ++h + "px";
  }
}

jQuery Plugin

편의를 위해 왼쪽 또는 오른쪽 하단 부동 이미지를 지원하는 이 jQuery 플러그인을 사용할 수 있습니다. :

$(function() {
  $(".bottomRight").bottomRight();
});

위 내용은 HTML 및 CSS에서 텍스트 줄 바꿈을 사용하여 이미지를 오른쪽 하단에 어떻게 띄울 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!