
Fiche N°17 : Affichage adaptatif d’une suite centrée de blocs d’informations
Comment afficher une suite de blocs d’informations de taille identique centrés quel que soit leur nombre.
Vous voulez afficher côte à côte des blocs de taille identique de façon harmonieuse et auto-adaptable ? Utiliser un conteneur avec la déclaration CSS3 "display : flex ;" (les contenus sont alors dits flexibles) est la meilleure solution : l’affichage des blocs se fait avec des marges gauches et droites identiques.
Ce procédé permet ainsi l’ adaptation à toutes les tailles d’écran (la "responsivité").
Côté HTML :
<div class="conteneur_service>
<div class="bouton_service">Titre1</div>
<div class="bouton_service">Titre2</div>
<div class="bouton_service">Titre3</div>
<div class="bouton_service">Titre4</div>
</div>
Côté CSS :
Nota :
En page Sommaire de notre site, les boutons cliquables vers les services proposés aux associations adhérentes du PIC sont des contenus flexibles.