Justifier la hauteur des colonnes dans une rangée

Bonjour,

C'est un sujet largement abordé en css mais je n'ai jamais trouvé de solution ultime dans mon cas précis.

En effet, e travaille à parti d'un constructeur de page (Wp Bakery sous Wordpress) et si toute mes classes CSS font le boulot, je cale sur la justification en hauteur de mes colonnes dans une rangée.

J'ai testé pas mal de display :
display-table-cell
display-table
display-flex
J'obtiens quelques améliorations mais aucun résultat net, soit toutes mes colonnes de la même hauteur quel que soit leur contenu dans la rangée.

C'est vraiment la grosse fonction CSS qui me manque, peut-être avez-vous la solution ?

Merci et oui bien entendu, mais je pense que j'ai trop rédigé alors que mon pb est hyper basique, juste faire en sorte que les colonnes de mes rangées soient de même hauteur quel que soit leur contenu.

Je te joins la petite maquette avec deux rangées, mais peut importe le style des rangées, c'est bien la hauteur égale de toutes les colonnes qui m'intéresse

Modifié par goudurisc (12 Apr 2020 - 14:53)

Bonjour. Exemple avec grid layout : CodePen (si besoin cliquer sur les icônes de réglage pour voir le code compilé). On peut faire la même chose avec flexbox.

Ok merci !!!, je vais voir mais voici ce que j'avais testé avec mon container et mes colonnes

Avec table :

.col-container {
    display: table; 
    width: 100%;
}
.col {
    display: table-cell;
}

Avec flex :

.col-container {
  display: flex;
  width: 100%;
}
.col {
  flex: 1;
  padding: 16px;
}

goudurisc a écrit :
C'est vraiment la grosse fonction CSS qui me manque

Hello,

C'est curieux puisque c'est le comportement de base des valeurs de display que tu as citées : flex, table-cell (et aussi grid). Du coup, sans savoir comment tu as procédé, c'est difficile de te dépanner.

Oui, je comprends mais en fait, ce css fonctionne très bien en soi mais je ne parviens pas à le faire fonctionner avec WpBakery qui est pourtant la référence en constructeur de pages sous Wordpress.

Sinon, franchement pas possible de fournir l'adresse du projet et quand bien même, je crois que le builder génère aussi pas mal de code (c'est le défaut des builder) qui brouille un peu les pistes.

J'ai même essayé :

.col-container {
    overflow: hidden;
}
.col {
    float: left;    
}

Idéalement, il faudrait une commande simple qui s'applique à n'importe quel élément et qui génère un flex vertical dans tous les cas