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

Flotter une image en bas à droite avec habillage du texte

Image flottante avec des dimensions fixes

Flotter une image en bas de la page pendant le texte l'enveloppement peut être réalisé avec une combinaison de CSS et de HTML. Pour assurer l'alignement en bas de page, créez un élément "spacer" avec les attributs suivants :

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

Au sein du CSS, attribuez à l'espaceur les propriétés suivantes :

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

Ensuite, appliquez les propriétés CSS à l'image :

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

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

JavaScript pour le contenu variable Hauteur

Pour les conceptions réactives où la hauteur du contenu varie, JavaScript peut être utilisé pour calculer dynamiquement la hauteur de l'espaceur :

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

Appelez la fonction sizeSpacer lors des événements de document prêt et de redimensionnement de la fenêtre.

Plugin jQuery

Un plugin jQuery peut être créé pour simplifier le processus, permettant des images flottantes en bas à gauche ou à droite et en spécifiant l'élément avec lequel s'aligner.

Conclusion

En utilisant un élément d'espacement, en faisant flotter l'image et en effaçant son espace droit, nous pouvons réussir à faire flotter une image en bas à droite tout en enveloppant le texte autour d'elle. . Cette approche fonctionne bien pour les dimensions d'image fixes et JavaScript peut être utilisé pour les hauteurs de contenu dynamiques.

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!