CSS : mettre en forme le Web (école d'ingénieur) · Chapitre 7 · Exercice de TD
Un objet média
Flexbox · niveau 1 (application)
Énoncé
Écrire le CSS d'un résultat de recherche : la couverture à gauche, de taille fixe, alignée en haut ; à droite, le titre et l'auteur, qui prennent la place restante dans une boîte de 30 rem au plus. Quelle largeur reste-t-il au texte avec un gap de 1 rem et une couverture de 60 pixels ?
Corrigé
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
margin: 16px;
font-family: system-ui, sans-serif;
}
.media {
display: flex;
gap: 1rem;
align-items: flex-start;
max-width: 30rem;
}
.media img {
flex: none;
}
.media-corps {
flex: 1;
min-width: 0;
}
.media-corps h2 {
margin: 0 0 0.25rem;
font-size: 1.1rem;
}
.media-corps p {
margin: 0;
}La boîte mesure 30 rem, soit 480 pixels : il reste au texte pixels (Chromium : 404). min-width: 0 évite le débordement d'un titre très long.
100 % gratuit
La suite du chapitre est sur Adloun
- 10 autres exercices corrigés dans ce chapitre
- Les 2 QCM du chapitre, le premier sans compte
- Le tuteur, qui guide pas à pas sans donner la réponse
Sans compte : le cours et le premier QCM. Exercices et tuteur : inscription gratuite en 30 secondes, sans carte bancaire.