Comment faire flotter une image à gauche du texte sans retour à la ligne ?

Flottant CSS : faire flotter une image à gauche du texte

Dans ce scénario, vous souhaitez obtenir une mise en page dans laquelle une image miniature flotte à gauche du contenu du texte, sans que le texte ne s'enroule autour de l'image. Voici une explication améliorée de la façon d'y parvenir en utilisant HTML et CSS :

Structure HTML :

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

CSS :

.post-container {
    margin: 20px 20px 0 0;  
    border: 5px solid #333;
    overflow: auto
}
.post-thumb {
    float: left
}
.post-thumb img {
    display: block
}
.post-content {
    margin-left: 210px
}
.post-title {
    font-weight: bold;
    font-size: 200%
}

Explication :

• Le conteneur .post contient à la fois la vignette et le contenu du texte.
• .post-thumb fait flotter l'image vers le à gauche du conteneur.
• Réglage de l'affichage : le bloc sur l'image garantit qu'elle occupe toute la largeur du conteneur .post-thumb.
• .post-content applique une marge gauche de 210 px pour garantir qu'il y a suffisamment d'espace entre l'image et le texte.
• .post-title formate le titre du message en gras et avec une taille de police plus grande.

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!