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

Flotteur CSS : faire flotter une image à gauche du texte

Question :

Comment faire flotter une image à gauche du texte, en veillant à ce que le texte ne s'enroule pas autour de l'image ?

HTML Code :

<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 description description etc etc etc</p></div>
</div>

Code CSS :

.post-container {
    margin: 20px 20px 0 0;  
    border: 5px solid #333;
}

.post-thumb img {
    float: left;
    clear:left;
}

.post-content {
    float:right;
}

Solution :

Pour corriger le placement et assurez-vous que le texte ne s'enroule pas autour de l'image :

1. Mettez à jour la propriété Overflow :

.post-container {
    ...
    overflow: auto;
}

Cela permettra au texte de s'écouler le long de l'image sans retour à la ligne.

2. Ajustez la marge gauche :

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

Cela créera un espace entre l'image et le texte, garantissant que le texte ne se chevauche pas.

3. Afficher l'image sous forme de bloc :

.post-thumb img {
    ...
    display: block;
}

Cela fera en sorte que l'image se comporte comme un élément de bloc, garantissant qu'elle reste sur une seule ligne.

**4. Mettre en gras et agrandir le message

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!