Comment faire flotter une image à gauche du texte en CSS ?-tutoriel CSS-php.cn

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

Mary-Kate Olsen

Libérer： 2024-11-11 06:30:03

original

199 Les gens l'ont consulté

How to Float an Image to the Left of Text in 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>

Copier après la connexion

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

Copier après la connexion

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>

Copier après la connexion

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

Copier après la connexion

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!