Contenu
- Les articles délicats sur le dessus
- T-shirts soigneusement emballés
- Les chaussettes qui comblent les lacunes
- Bon voyage
Il est minuit, et celui-là div sur votre site ressemble toujours à un coffre à jouets pour enfant. Tous les éléments sont en désordre, et chaque fois que vous jouez avec les CSS affichage propriété, ils se réorganisent en un tout autre non-sens.
Si vous êtes comme moi, vous résoudrez probablement ce problème en marmonnant à voix basse et en devenant toujours plus agressif avec votre clavier. Et bien que cette stratégie ait fonctionné pour moi auparavant, j'ai récemment cherché un meilleur moyen de comprendre le affichage propriété.
Il s'avère que les bases de affichage sont beaucoup plus simples que je ne le pensais au départ. En fait, ils utilisent les mêmes principes que l'emballage d'une valise. Je vais couvrir bloc de visualisation, bloc en ligne et en ligne. Si vous avez arrangé une valise de manière ordonnée auparavant, vous verrez le parallèle. Si vous êtes le genre de personne qui enfonce tous vos vêtements au hasard, eh bien, je ne peux pas faire grand chose pour vous.
Notre valise contiendra trois types de vêtements:
- Délicat, comme une chemise à col
- T-shirts enroulables
- Chaussettes ou sous-vêtements qui peuvent être fourrés dans les espaces
Pour référence, si nous modélisions la valise en HTML, cela ressemblerait à ceci:
div class = 'valise'> div class = 'délicat'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> div class = 'chaussettes'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> / div>
Les articles délicats sur le dessus
Bloc de visualisation est la valeur par défaut pour la plupart des éléments HTML. Cela signifie que l'élément occupe tout l'espace horizontal dans son conteneur div. S'il est à côté d'autres éléments frères, il commencera une nouvelle ligne et n'autorisera pas d'autres éléments sur sa ligne. C'est similaire aux objets délicats que vous mettez en haut de votre valise. Ce sont des articles délicats ou intelligents tels que des chemises à col. Vous ne voulez pas qu’ils se froissent, alors assurez-vous qu’ils ne sont pas poussés contre d’autres vêtements.
Cela soulève l'une des parties les plus difficiles de bloc de visualisation. Remarquez que la chemise à col n'occupe pas toute la largeur de la valise? Cela ne veut pas dire que d'autres objets atteindront son niveau. Disons que cette chemise fait 60% de la largeur de la valise; cela empêcherait encore d'autres éléments de le rejoindre au niveau supérieur.
C'est pourquoi il y a une bordure orange sur l'image. UNE bloc de visualisation L'élément ajoutera automatiquement une marge autour de lui s'il n'occupe pas tout l'espace horizontal.
T-shirts soigneusement emballés
La majeure partie de votre valise est probablement pleine du reste de vos vêtements pour votre voyage. Par souci de simplicité, nous allons réduire cela à juste des t-shirts. Il y a un grand débat sur Internet pour savoir si le pliage ou le roulage est plus efficace. Je suis une personne pliante.
Quoi qu'il en soit, afin de s'adapter au plus grand nombre d'articles, vous alignez vos t-shirts côte à côte. C'est exactement ce que affichage: bloc en ligne est destiné à. Ces éléments peuvent s'asseoir les uns à côté des autres sur la même ligne, ainsi qu'à côté affichage: en ligne éléments.
contrairement à affichage: en ligne éléments, un bloc en ligne L'élément passera à la ligne suivante s'il ne rentre pas dans son contenant div à côté de l'autre bloc en ligne éléments. Pour qu'un T-shirt se répande sur la rangée suivante, vous devez le couper en deux et utiliser la moitié restante pour commencer une nouvelle rangée. Bloc en ligne les éléments ne sont pas autorisés à se diviser en deux s'ils ne tiennent pas sur une ligne.
Les chaussettes qui comblent les lacunes
Revenez au code HTML d'origine et vous remarquerez qu'il y a une chaussette div> entre les huit T-shirts. Mais jetez un œil à la vue horizontale de la valise à droite. S'il y a une chaussette div>, comment peut-il terminer la rangée du milieu et commencer la rangée du bas? Tel est le but de affichage: en ligne!
Un en ligne l'élément débordera sur la ligne suivante s'il dépasse la largeur du div (de cette façon, il est différent de bloc en ligne ou alors bloquer). Depuis nos chaussettes div est plein de chaussettes qui sont farcies au hasard dans les espaces, il peut facilement commencer à combler l'espace sur le côté droit de la rangée du milieu et déborder pour commencer la rangée du bas.
Aucune chaussette n'aura besoin d'être coupée en deux pour que cela se produise. C'est pourquoi ils peuvent devenir en ligne, tandis que les T-shirts ne peuvent être bloc en ligne. Si les t-shirts de la rangée du milieu n'occupaient que 60% de la largeur, les chaussettes div> se déplacerait vers le haut pour remplir tout l'espace sur le reste de la ligne.
Bon voyage
Voici le CSS final pour notre valise:
.delicate {affichage: bloc; largeur: 60%; } .tshirt {affichage: bloc en ligne; largeur: 20%; } .socks {affichage: en ligne; }
Voici quelques scénarios alternatifs pour illustrer les différentes utilisations de l'affichage. Si les délicats sur le dessus avaient affichage: bloc en ligne, ils rentreraient juste à côté des T-shirts. Certains des T-shirts passeraient à la ligne supérieure et les autres s'ajusteraient en conséquence. Il n'y aurait pas de tampon confortable à gauche et à droite de la chemise à col.
Si chaque T-shirt avait bloc de visualisation, vous auriez une pile massive de T-shirts les uns sur les autres, un par ligne. Si les chaussettes avaient affichage: bloc en ligne, ils seraient tous assis sur la rangée du bas plutôt que de couler entre les deux rangées. Certains T-shirts seraient poussés sur une autre rangée, formant une quatrième ligne. Il y aurait un espace à droite de la rangée du milieu des T-shirts.
Avec la méthode que j'ai décrite ici, nous nous retrouvons avec une valise bien emballée qui utilise au mieux l'espace disponible.
Cet article a été initialement publié dans magazine net issue 289; achetez-le ici!
