Mettre des divs en colonne à la même hauteur

a marqué ce sujet comme résolu.
Auteur du sujet

Bonjour à tous !

Je viens chercher un peu d’aide car pour un side project que je suis en train de développer (et que je présenterai bientôt), je suis face à bug CSS que mes maigres connaissances n’arrivent pas à résoudre.

Le problème
Le problème

Comme vous pouvez le voir sur la capture, j’ai un ensemble de div dans une colonne. Le problème, c’est que certains textes à l’intérieur sont plus longs que les autres et les cartes sont donc, par conséquent, plus hautes.

J’aimerais que toutes les div d’une colonne (une colonne peut être, comme ici, sur deux lignes, elle correspond en fait à une date) aient la même hauteur.

J’ai essayé plusieurs méthodes en CSS, mais rien qui ne marchait chez moi, probablement car je copie/colle sans trop comprendre.

Voici les CSS qui peuvent peut-être être utiles :

La CSS du container d’une tâche (donc d’un bloc de couleur dans la capture ci-dessus) :

.task-container {
    display: inline-block;
    float: none;
}

Quant à la ligne :

.row {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 20px;
}

Pour info, c’est le framework Materialize CSS que j’utilise.

Merci d’avance de votre aide, et n’hésitez pas si vous avez besoin de plus d’infos, voire un accès à l’environnement de dev pour voir par vous-mêmes :)

+0 -0

Hello,

Malheureusement faire ça avec du positionnement classique est très compliqué, pour ne pas dire impossible (en tout cas proprement).

Heureusement… il existe flexbox qui permet de répondre à ce besoin !

En utilisant flexbox pour tes colonnes et les blocs dedans tu pourras gérer le remplissage des parents si besoin. ;)

Mes tutos — Architecte technique : JS/Node/Angular/Mongo, PHP/MySQL, AWS — Consultant qualité, ergonomie et UX

+2 -0
Auteur du sujet

Merci pour votre aide à tous, j’ai réussi à pas mal avancer mais pas encore tout à fait ce que je veux.

Pour l’instant, j’ai ceci :

Etat actuel
Etat actuel

Comme vous le voyez, mes cartes sont étirées sur toute la longueur de la ligne. Y a-t-il un moyen d’éviter ça ? Globalement, j’aimerais limiter la taille de mes cartes à 15%.

Merci encore pour votre aide :)

Voici ma CSS actuelle :

.parent {
  display: flex;
  flex-wrap: wrap;
}

.child {
  display: flex;
  flex: 1 0 15%;
  margin-right: 0.75rem;
  margin-left: 0.75rem;
  padding: 24px;
  align-items: flex-start;
  cursor: pointer;
}

.baby {
  width: 100%;
}
+0 -0
Connectez-vous pour pouvoir poster un message.
Connexion

Pas encore membre ?

Créez un compte en une minute pour profiter pleinement de toutes les fonctionnalités de Zeste de Savoir. Ici, tout est gratuit et sans publicité.
Créer un compte