Bonjour à tous,
Je suis confrontée à une problématique pour laquelle j'ai peu d'espoir qu'il existe une solution, mais sait-on jamais.
J'ai une série de plusieurs blocs (ce nombre de blocs variera selon mes pages), mettons 7 pour mon exemple. Ces blocs ont tous la même largeur. Largeur qui varie selon la taille de l'écran. Avec les media-queries, au-dessus d'une certaine largeur mes blocs sont à 25% (donc 4 par ligne), puis je les passe à 50% entre deux largeur (donc 2 par ligne), puis 100% en-dessous d'une certaine largeur (1 par ligne, principalement sous smartphone). Jusque là, tout va bien !
Chacun de ces blocs possède une bordure grise. Du coup, comme la quantité de contenu de ces blocs varie, on voit bien que la hauteur des blocs n'est pas la même, et c'est un peu brouillon. Pour pallier à ça, j'avais utilisé la propriété table-cell. Ainsi tous mes blocs, peu importe le contenu, font la même hauteur, et on a des blocs de hauteur uniforme.
Tout le monde suit ?
Et c'est là que ça coince, parce que du coup, en forçant mes blocs à réagir comme un tableau, ils restent tous sur la même ligne, peu importe la taille de l'écran. J'en ai donc 7 par ligne quoiqu'il arrive.
Je n'arrive donc pas à trouver la solution qu'il faut pour avoir à la fois des blocs à hauteur uniforme, et des blocs qui réagissent de manière responsive, en passant à la ligne selon la taille de l'écran.
J'ai préféré expliqué le topo plutôt que de mettre du code, mais si vous préférez un exemple concret, je vous ferai ça.
Précision : ce contenu sera dans un editeur de texte de l'admin, et donc accessible au client pour qu'il puisse modifier les textes. Je veux donc rester au maximum sur du CSS et non du javascript.
Un grand merci d'avance !
Je suis confrontée à une problématique pour laquelle j'ai peu d'espoir qu'il existe une solution, mais sait-on jamais.
J'ai une série de plusieurs blocs (ce nombre de blocs variera selon mes pages), mettons 7 pour mon exemple. Ces blocs ont tous la même largeur. Largeur qui varie selon la taille de l'écran. Avec les media-queries, au-dessus d'une certaine largeur mes blocs sont à 25% (donc 4 par ligne), puis je les passe à 50% entre deux largeur (donc 2 par ligne), puis 100% en-dessous d'une certaine largeur (1 par ligne, principalement sous smartphone). Jusque là, tout va bien !
Chacun de ces blocs possède une bordure grise. Du coup, comme la quantité de contenu de ces blocs varie, on voit bien que la hauteur des blocs n'est pas la même, et c'est un peu brouillon. Pour pallier à ça, j'avais utilisé la propriété table-cell. Ainsi tous mes blocs, peu importe le contenu, font la même hauteur, et on a des blocs de hauteur uniforme.
Tout le monde suit ?
Et c'est là que ça coince, parce que du coup, en forçant mes blocs à réagir comme un tableau, ils restent tous sur la même ligne, peu importe la taille de l'écran. J'en ai donc 7 par ligne quoiqu'il arrive.
Je n'arrive donc pas à trouver la solution qu'il faut pour avoir à la fois des blocs à hauteur uniforme, et des blocs qui réagissent de manière responsive, en passant à la ligne selon la taille de l'écran.
J'ai préféré expliqué le topo plutôt que de mettre du code, mais si vous préférez un exemple concret, je vous ferai ça.
Précision : ce contenu sera dans un editeur de texte de l'admin, et donc accessible au client pour qu'il puisse modifier les textes. Je veux donc rester au maximum sur du CSS et non du javascript.
Un grand merci d'avance !
)