Comment positionner une image à gauche du texte sans retour à la ligne à l'aide de flotteurs CSS ?

Utiliser des flotteurs CSS pour positionner une image à gauche du texte

Lors de la conception d'une page Web, vous pouvez rencontrer des situations dans lesquelles vous souhaitez qu'une image apparaisse à gauche du texte. texte, sans qu'il s'enroule autour du texte. L'utilisation de flottants CSS fournit une solution à cela.

HTML

Dans votre HTML fourni, il y a trois éléments essentiels :

• .post-container : contient l'ensemble boîte aux lettres.
• .post-thumb : contient l'image que vous souhaitez faire flotter à gauche.
• .post-content : contient le titre et la description du message.

<div class="post-container">
    <div class="post-thumb"><img src="thumb.jpg" /></div>
    <div class="post-title">Post title</div>
    <div class="post-content"><p>post description...</p></div>
</div>

CSS

Pour obtenir la mise en page souhaitée, appliquez les propriétés CSS suivantes :

• .post-container : Définissez le débordement : auto pour permettre au contenu à l'intérieur de s'étendre au-delà des limites du conteneur.
• .post-thumb : Définissez float: left pour faire flotter l'image vers la gauche.
• .post-thumb img : Définir l'affichage : bloquer pour garantir que l'image s'affiche seule space.
• .post-content : définissez une valeur de marge gauche supérieure à la largeur de l'image (par exemple, 210 px) pour positionner le texte à droite de l'image.

.post-container {
    overflow: auto;
}

.post-thumb {
    float: left;
}

.post-thumb img {
    display: block;
}

.post-content {
    margin-left: 210px;
}

Remarques importantes

• Pour éviter que l'image ne s'enroule autour du texte, assurez-vous que La valeur de marge gauche pour .post-content est plus large que la largeur de l'image.
• Si vous désirez un en-tête en haut de la boîte aux lettres, pensez à utiliser un

  balise dans .post-content.

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!