Comment puis-je faire flotter une image en bas à droite avec un habillage de texte en HTML et CSS ?

Images flottantes avec habillage de texte : un guide complet

En HTML et CSS, positionner des images à côté du texte peut être un défi, surtout lorsque vous souhaitez que l'image flotte vers en bas à droite et le texte à enrouler autour. Cet article explique comment obtenir cet effet à l'aide d'un élément d'espacement et de JavaScript.

Créer un élément d'espacement

Pour pousser l'image vers le bas de la page, créez un élément d'espacement avec float : droite et une hauteur égale à la différence entre les hauteurs du contenu et de l'image :

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

CSS Styles

Utilisez les styles CSS suivants :

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

Calcul de la hauteur de l'espacement

Pour positionner avec précision l'image, vous allez vous devez calculer la hauteur de l'entretoise à l'aide de JavaScript. Cette fonction prend l'élément spacer comme argument :

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";
  }
}

Plugin jQuery

Pour plus de commodité, vous pouvez utiliser ce plugin jQuery qui prend en charge les images flottantes en bas à gauche ou à droite :

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!