Wie kann ich ein Bild mit Textumbruch in HTML und CSS nach rechts unten verschieben?

Floating-Bilder mit Textumbruch: Eine umfassende Anleitung

In HTML und CSS kann die Positionierung von Bildern neben Text eine Herausforderung sein, insbesondere wenn das Bild schweben soll unten rechts und der Text, der darum herum umbrochen werden soll. In diesem Artikel wird erläutert, wie Sie diesen Effekt mithilfe eines Abstandselements und JavaScript erzielen.

Erstellen Sie ein Abstandselement

Um das Bild an den unteren Rand der Seite zu verschieben, erstellen Sie ein Abstandselement mit Float: rechts und einer Höhe, die der Differenz zwischen Inhalts- und Bildhöhe entspricht:

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

CSS Stile

Verwenden Sie die folgenden CSS-Stile:

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

Berechnen der Abstandshalterhöhe

Um das Bild genau zu positionieren, müssen Sie Folgendes tun Sie müssen die Höhe des Abstandshalters mit JavaScript berechnen. Diese Funktion verwendet das Spacer-Element als 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";
  }
}

jQuery-Plugin

Der Einfachheit halber können Sie dieses jQuery-Plugin verwenden, das schwebende Bilder unten links oder rechts unterstützt :

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

Das obige ist der detaillierte Inhalt vonWie kann ich ein Bild mit Textumbruch in HTML und CSS nach rechts unten verschieben?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!