Cela peut sembler \u00e9vident \u00e0 faire dans la th\u00e9orie, mais en pratique cr\u00e9er des colonnes de m\u00eame hauteur quel que soit le contenu de chacune d’elle demande de s’accorder un peu de temps de recherche, notamment si l’on souhaite la solution flexible et d\u00e9pourvue de \u00ab\u00a0hack\u00a0\u00bb en JS. J’ai quelque chose pour vous\u00a0!<\/p>\n
table<\/code><\/h2>\nL’une de ces solutions requiert l’utilisation des tableaux CSS (display: table-*;<\/code>) mais apporte sont lots de sp\u00e9cificit\u00e9s, avec en vrac\u00a0:<\/p>\n\n- vous devrez conna\u00eetre le nombre d’\u00e9l\u00e9ments par ligne et ne pas en changer<\/li>\n
- cette solution fonctionne d\u00e8s IE8<\/li>\n
- des positionnements avanc\u00e9s (
absolute<\/code> notamment) risquent de vous poser probl\u00e8me<\/li>\n- certains styles sur les colonnes seront difficiles \u00e0 mettre en place<\/li>\n<\/ul>\n
Outre ces quelques particularit\u00e9s, cette solution r\u00e9pond n\u00e9anmoins \u00e0 notre besoin qui est de cr\u00e9er des colonnes de m\u00eame hauteur.
\nVoyons un exemple de code, avec un bout de HTML :<\/p>\n
<div class=\"column-layout\">\r\n <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit quia, quam delectus sequi odio fugit pariatur architecto, deleniti exercitationem quae adipisci ipsum ullam officia ea!<\/div>\r\n <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur adipisci, quod voluptates, vel nostrum ea distinctio, a tempore voluptas reiciendis doloremque veniam, accusantium. Veritatis ipsum modi doloribus enim sint magnam, delectus dolorum, aperiam! Eaque dolor, veniam eum sunt dolorem nostrum. Dolores, corporis! Magnam, amet quas? Voluptates eaque quaerat quia inventore, earum eveniet hic alias rem atque neque ab, reprehenderit dolore culpa, blanditiis! Maiores enim rerum architecto voluptatibus cumque. Debitis accusamus ea aut incidunt voluptatibus quibusdam rem sint laboriosam qui sit odio expedita illum iste consectetur fugit eaque commodi pariatur, porro ex delectus officia ratione necessitatibus totam. Necessitatibus est autem et.<\/div>\r\n <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque velit dolores ipsa maiores molestias minus iusto nulla consequatur saepe. Aspernatur nulla optio laborum ducimus dignissimos nisi itaque aliquam doloremque, iure qui. Corporis quas atque minus, eveniet delectus officiis dolor, neque, animi, deleniti adipisci esse! Ullam nesciunt, nemo fugit totam itaque.<\/div>\r\n<\/div><\/code><\/pre>\nPrenez volontairement des contenus vari\u00e9s, vous pouvez tester avec des images ins\u00e9r\u00e9es dans l’une des divisions par exemple.<\/p>\n
Le code CSS va \u00eatre relativement court, il consiste simplement \u00e0 cr\u00e9er les diff\u00e9rentes cellules.<\/p>\n
.column-layout {\r\n display: table;\r\n width: 100%;\r\n border-collapse: separate;\r\n}\r\n.column-layout > div {\r\n display: table-cell;\r\n width: 33.3333%; \/* 100%\/3 = 3 colonnes *\/\r\n padding: 20px;\r\n border: 5px #F2F2F2 solid;\r\n background: #FFF;\r\n box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15) inset;\r\n}<\/code><\/pre>\nLe conteneur des 3 cellules prend le comportement d’un tableau (l.2) d’une largeur de 100% (l.3).
\nChacune des divisions enfant devient une cellule (l.7) et occupe 1 tiers de la largeur disponible (l.8).
\nPour le reste c’est de la d\u00e9coration.<\/p>\n
D\u00e9monstration<\/a> Fork on CodePen.io<\/a><\/p>\nIntroduisons un peu de flex<\/code>ibilit\u00e9<\/h2>\nUne autre solution consiste en l’utilisation de Flexible box Layout Module<\/a>, ce fameux module r\u00e9\u00e9crit bon nombre de fois depuis 2009.
\nCette solution est beaucoup plus flexible, comme son nom l’indique \ud83d\ude42
\nElle apporte \u00e9galement sont lot de sp\u00e9cificit\u00e9s\u00a0:<\/p>\n\n- un minimum de connaissances sur ce nouveau module CSS<\/li>\n
- une compatibilit\u00e9 \u00e0 partir de IE10 (le fallback naturel reste convenable)<\/li>\n
- une syntaxe un peu redondante pour un support optimal<\/li>\n<\/ul>\n
Reprenez le m\u00eame code HTML, mais appliquez ces styles \u00e0 la place des pr\u00e9c\u00e9dents.<\/p>\n
.column-layout {\r\n display: flex;\r\n flex-wrap: wrap;\r\n}\r\n.column-layout > div {\r\n display: flex;\r\n width: 47%;\r\n padding: 20px;\r\n margin: 10px 1.5%;\r\n background: #FFF;\r\n box-shadow: 0 0 3px rgba(0,0,0,0.05)\r\n}<\/code><\/pre>\nIci je propose un syst\u00e8me de deux colonnes.
\nBien entendu, si vous avez besoin de 3 colonnes, renseignez la CSS comme suit\u00a0:<\/p>\n
.column-layout > div {\r\n width: 32%;\r\n margin: 10px 0.666%;\r\n}<\/code><\/pre>\n \/* pour display *\/\r\n display: -webkit-flex;\r\n display: -ms-flexbox;\r\n display: flex;\r\n\u00a0\r\n \/* pour flex-wrap *\/\r\n -webkit-flex-wrap: wrap;\r\n -ms-flex-wrap: wrap;\r\n flex-wrap: wrap;<\/code><\/pre>\nLes autres syntaxes (il en existe d’autres) repr\u00e9sentent un nombre d’utilisateurs trop peu important pour \u00eatre utiles ici.<\/p>\n
Comme vous le constaterez \u00e0 l’usage, cette solution est compl\u00e8te et permet toutes les extravagances possibles en terme de design et mise en page en colonnes.
\nConcernant la probl\u00e9matique du support en dessous de IE10, sachez que le fallback naturel fait simplement passer chaque colonne en ligne de contenu, ce qui n’est pas n\u00e9cessairement probl\u00e9matique.<\/p>\n