28172 sujets

CSS et mise en forme, CSS3

Bonsoir,
J'ai 4 DIVs côte à côte, auxquels j'applique une largeur de 20%, ainsi qu'une largeur minimale en px. Si je réduis la largeur de la page, le DIV le plus à droite va finir par être renvoyé à la ligne, ce qui va laisser un "vide" à droite du 3e DIV.
Est-il possible d'élargir automatiquement les DIV pour éviter ce vide ?
Merci pour votre aide.
Modérateur
Salut !

Je suis joueur ce matin alors je vais parier sur ce que j'ai cru comprendre :
https://jsfiddle.net/4gdtrLkn/ et paf
le seul soucis de cette technique c'est que la div qui reviens à la ligne prend toute la largeur. Je ne sais pas si ca te va. Si l'objectif c'est de passer de 4 à 3 colonne je te proposerai plutot de passer par une grille à 4 colonne que tu réduis a 3 colonnes (puis 2, puis 1) avec des media queries.

Bonne journée !
Modérateur
Bonjour,

pour continuer à jouer avec l''exemple de Laurent, un display:grid en auto-fit.

https://jsfiddle.net/8kjcm61y/ voir aussi https://jsfiddle.net/8kjcm61y/1/ (les 20% ? ).

Ta question est trop imprécise pour que l'on voit ce que tu cherches à faire et ou tu trébuches.

Sinon, pour répondre à :Est-il possible d'élargir automatiquement les DIV pour éviter ce vide ? - "Oui, c'est possible, bien sûr" Smiley cligne

Cdt
Modérateur
gcyrillus a écrit :
=un display:grid en auto-fit.
https://jsfiddle.net/8kjcm61y/

Moi en regardant ta solution : https://media.giphy.com/media/Z5HVfEvnxr67u/giphy.gif

Moi qui suis un chevalier du grid j'étais complètement passé a coté de auto-fit et auto-fill dans le repeat ! Je suis à la fois honteux d'être passé à coté tout ce temps et émerveillé par cette découverte Smiley ola

merci gcyrillus t'as refait ma journée Smiley lol
Modifié par _laurent (23 Feb 2022 - 12:00)