Maison > interface Web > tutoriel CSS > Comment empêcher le texte de s'enrouler autour des images flottantes en CSS ?

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

Mary-Kate Olsen
Libérer: 2024-11-22 09:15:13
original
421 Les gens l'ont consulté

How to Prevent Text from Wrapping Around Floating Images in 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>
Copier après la connexion

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%;
}
Copier après la connexion

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal