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

テキストの折り返しで画像を右下にフローティング

固定サイズで画像をフローティング

テキストを表示しながら画像をページの下部にフローティングラップアラウンドは、CSS と HTML の組み合わせで実現できます。ページの下部に確実に配置するには、次の属性を持つ「スペーサー」要素を作成します:

<div class="spacer"></div>

CSS 内で、スペーサーに次のプロパティを与えます:

.spacer {
    float: right;
    height: calc(100% - ImageHeight); /* Adjust the height to match the content */
    width: 0px;
}

次に、CSS プロパティを画像に適用します:

<img class="bottomRight" src="..." />

.bottomRight {
    float: right;
    clear: right;
}

可変コンテンツ用の JavaScript高さ

コンテンツの高さが変化するレスポンシブ デザインの場合、JavaScript を使用してスペーサーの高さを動的に計算できます。

function sizeSpacer(spacer) {
    spacer.style.height = 0;
    // Calculate spacer height based on content and image dimensions
    spacer.style.height = h + "px";
}

ドキュメントの準備完了イベントとウィンドウ サイズ変更イベントで sizeSpacer 関数を呼び出します。

jQuery プラグイン

プロセスを簡素化するために jQuery プラグインを作成すると、フローティング画像を

結論

スペーサー要素を利用し、画像をフローティングし、その右側のスペースをクリアすることで、画像を正常にフローティングさせることができます。テキストを回り込みながら右下に移動します。このアプローチは固定画像サイズに適しており、JavaScript は動的なコンテンツの高さに使用できます。

以上がCSS と JavaScript でテキストを折り返して画像を右下に浮かせるにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。