HTML と CSS でテキストを折り返して画像を右下に浮かせるにはどうすればよいですか?

テキストの回り込みによるフローティング画像: 包括的なガイド

HTML と CSS では、特に画像をフローティングさせたい場合、テキストの横に画像を配置するのが難しい場合があります。右下とそれを囲むテキスト。この記事では、スペーサー要素と JavaScript を使用してこの効果を実現する方法について説明します。

スペーサー要素を作成する

画像をページの下部にプッシュするには、 float: right とコンテンツと画像の差に等しい高さを持つスペーサー要素高さ:

<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 中国語 Web サイトの他の関連記事を参照してください。