Comment faire flotter une image à gauche du texte en CSS ?

Flotter une image à gauche du texte avec CSS

Problème

Vous rencontrez des difficultés pour faire flotter une image à gauche du texte dans un élément HTML, tout en gardant le texte à droite et en empêchant l'image de s'enrouler autour de lui.

Implémentation actuelle

Voici votre code HTML :

<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>

Et votre 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 obtenir le résultat souhaité, vous pouvez effectuer les modifications suivantes :

HTML :

<div class="post-container">                
    <div class="post-thumb"><img src="http://dummyimage.com/200x200/f0f/fff" /></div>
    <div class="post-content">
        <h3 class="post-title">Post title</h3>
        <p>post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc </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

• La propriété overflow: auto sur le .post-container permet au texte de circuler autour de l'image, l'empêchant de s'enrouler.
• La propriété display: block sur l'image garantit qu'il occupe toute la largeur de son conteneur.
• La propriété margin-left sur le .post-content fournit suffisamment d'espace pour que l'image flotte sur la gauche.

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!