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!