Bonjour!
Une merveilleuse année à tous!
Ne faites pas trop d'ordi et faites en en bonne ergonomie! Faites des pauses et ayez une vie sociale et sportive!
Voici la question qui m'amène sur le forum:
- J'ai un conteneur div (le main d'un site wordpress) width:100% (dépend donc des résolutions user)
- à l'intérieur j'affiche des divs ( liens de profils de membres contenant 1 photo et 3 lignes de texte). Ces divs doivent faire un minimum de pixels pour afficher le contenu correctement.
Mon objectif est que ces divs forment une grille qui:
- remplisse à 100% la largeur du main div
- respecte le min-width des divs
Pour l'instant j'ai:
Du coup j'ai 3 profilsdivs obligatoire par ligne via width:33%; . ça me permet de remplir le main à 100% mais ce n'est pas flexible! L'idéal serait qu'il puisse y avoir 4 ou 5 profilsdivs si la résolution user le permet.
il faudrait que la largeur des profilsdivs soit comprise entre un min-width et un max-width ce qui permettrait de calculer un nombre de profilsdivs par ligne dans le maindiv en fonction de la résolution user. Ou bien utiliser des marges qui s'adaptent entre les divs (j'ai essayé des margin auto, ça ne marche pas que les divs soient float ou bien inline-block)
Peut on faire cela sans utiliser javascript (que je ne connais pas du tout!). Est ce que cette propriété "flex" présentée dans les news pourrait le faire?
edit : je pense qu'il pfaut que j'essai un flex comme ceci:
Merci de votre aide!
Thomas
Modifié par thomascz (01 Jan 2015 - 12:19)
Une merveilleuse année à tous!
Ne faites pas trop d'ordi et faites en en bonne ergonomie! Faites des pauses et ayez une vie sociale et sportive!
Voici la question qui m'amène sur le forum:
- J'ai un conteneur div (le main d'un site wordpress) width:100% (dépend donc des résolutions user)
- à l'intérieur j'affiche des divs ( liens de profils de membres contenant 1 photo et 3 lignes de texte). Ces divs doivent faire un minimum de pixels pour afficher le contenu correctement.
Mon objectif est que ces divs forment une grille qui:
- remplisse à 100% la largeur du main div
- respecte le min-width des divs
Pour l'instant j'ai:
profilsdivs {
min-width : 350px;
width:33%;
height: 250px;
float:left; }
Du coup j'ai 3 profilsdivs obligatoire par ligne via width:33%; . ça me permet de remplir le main à 100% mais ce n'est pas flexible! L'idéal serait qu'il puisse y avoir 4 ou 5 profilsdivs si la résolution user le permet.
il faudrait que la largeur des profilsdivs soit comprise entre un min-width et un max-width ce qui permettrait de calculer un nombre de profilsdivs par ligne dans le maindiv en fonction de la résolution user. Ou bien utiliser des marges qui s'adaptent entre les divs (j'ai essayé des margin auto, ça ne marche pas que les divs soient float ou bien inline-block)
Peut on faire cela sans utiliser javascript (que je ne connais pas du tout!). Est ce que cette propriété "flex" présentée dans les news pourrait le faire?
edit : je pense qu'il pfaut que j'essai un flex comme ceci:
.container {
display: flex;
flex-flow: row wrap;
justify-content:space-between;
}
.divsprofil {
flex: 1;
min-width:350px /*ou flex-basis:350px ?*/
}
Merci de votre aide!
Thomas
Modifié par thomascz (01 Jan 2015 - 12:19)
