Cuisine et Web

Recettes pour Cuisiniers ou Web Dev en herbes

Fausses colonnes avec inline-block et linear gradient

Rédigé par G.Cyrille Aucun commentaire
Classé dans : CSS, WebDev Mots clés : inline-block, linear-gradient

! Article en partie obsolète en ce qui concerne IE.

Non, il n'y a pas de soluce universelle pour simuler des colonnes et aligner leurs contenus respectifs, mais des tas, En voici une pour le souvenir.

Aujourd'hui, nous avons flex et grid, en passe de devenir universels, mais il reste de nombreux appareils en services (tablette,télephone,..), des navigateurs obsolétes ou exotiques (ex:TV connectées), il y a aussi les applis de courriels. Les vielles méthodes restent des alternatives utiles. .

CSS mis en œuvre

  • margin:auto; pour le conteneur auquel on donne une largeur.
  • display:inline-block; et vertical-align pour les 2 similis colonnes
  • :before, position:absolute pour les bordures centrales et l'ecart entre les deux simili-colonnes.
  • linear-gradient pour les couleurs de chaque simili-colonne et l'espace entre elles

Selon les version de IE on aura toujours nos deux colonnes avec ou sans séparations.

Démonstration:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vitae risus tellus. Nam tristique neque in arcu vestibulum a egestas massa rutrum. Suspendisse dictum pharetra tortor, quis commodo purus semper viverra. Donec imperdiet, ligula in posuere tempor, sapien ante rhoncus nibh, eget placerat tellus dolor tristique neque.
Phasellus ligula felis, venenatis mollis porta suscipit, ultrices et odio. Sed eget sem nec odio venenatis tempus. Curabitur accumsan viverra libero, eu egestas elit convallis at.

Pas de tableau ni de display:table-cell; et pour Ie7 et moins , on a 2 colonnes quand même mais on perd les bordures centrales et les 2 couleurs.

Si l'alignement vertical ne vous intéresse pas , alors float a la place de display:inline-block convient parfaitement, c'est d'ailleurs le choix mis en application comme alternative pour IE7 et inf .

Stop

Ne confondez plus table et display:table en pensant float(incapable d'alignement) en alternative , utilisez ce qu'il faut sans vous demandez si vous avez le droit d'faire ça.

Edit 2021

display : flex ou grid sont aujourd'hui très efficaces et aisés a mettre en œuvre pour créer de véritables colonnes, privilégiez leur usages.

Laisser un message.

Quelle est le troisième caractère du mot kvsy8 ?