Comment empêcher le texte de s'enrouler autour des images flottantes en CSS ?

Images et texte flottants en CSS

Vous désirez une mise en page où les vignettes flottent à gauche du texte, tout en empêchant le texte de s'enrouler autour des images . Voici comment y parvenir :

Structure HTML :

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

Style CSS :

.post-container {
    margin: 20px 20px 0 0;  
    border: 5px solid #333;
    display: flex; /* Create a flexible layout container */
}
.post-thumb {
    float: left;
    margin-right: 20px; /* Create some spacing between the thumbnail and text */
}
.post-thumb img {
    display: block;
}
.post-content {
    margin-left: auto; /* Push the text to the right side of the container */
}
.post-title {
    font-weight: bold;
    font-size: 200%;
}

Par en utilisant display: flex de CSS, nous créons un conteneur flexible qui permet aux éléments post-thumb et post-content de s'étendre et de se réduire selon les besoins. Le float: left sur le post-thumb et le margin-left: auto sur le post-content aident à positionner les éléments comme vous le souhaitez.

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!