[Résolu] Flex, <div> de même hauteur

15 Feb 2024 à 23:10

Bonsoir,

Il me reste un détail à régler sur la page https://gite-moelan.fr/gite-8-personnes-bretagne.html. La hauteur des DIVs varie en fonction de leur contenu or je souhaiterais qu'elles aient toutes la même hauteur. Après avoir essayé de trouver la solution par moi-même (sans succès vous vous en doutez), je m'en remets à votre bonne volonté.
Merci par avance.

Cdt

EDIT: correction du lien qui ne fonctionnait pas à cause du "." qui le suivait.
Modifié par gite-ti-goudoul (16 Feb 2024 - 08:36)

gcyrillus

Modérateur

16 Feb 2024 à 00:06

Bonsoir,

je te propose:

.col-img.photo-paysage a.no-form {
  display:grid;
  grid-template-rows: auto 1fr;
  height: 100%;    
}
.no-form .legende {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.no-form button{
  margin-top: auto
}

Ces deux autres règles (pansements/optionnelles)
1) c'est pour un bouton qui est dans un paragraphe au lieu d'être le dernier élément d'une boite .legende.


.no-form p:last-child{
  display: contents;  
}

2) Tu as le dernier élément .photo-paysage sans image, j'y glisse un pseudo élément au ratio des images pour repousser ton bloc .legende et l'aligner avec celui de la boite .photo-paysage précédente.


.no-form:has(div:first-child):before  {
  content:'';
  display:block;
  aspect-ratio:2/1.5;
}

cdt

CSS et mise en forme, CSS3

[Résolu] Flex, <div> de même hauteur