Discussion :

[comode]

Bonjour,

J'ai sur un site une DIV centrale de largeur variable dans laquelle je souhaite afficher des boîtes contenant une photo et un texte.
Ces boites sont de largeur et de hauteur fixes et prédéfinies (200px).

J'essaye vainement de faire en sorte que ces boites s'arrangent automatiquement en fonction de la largeur de leur container; par exemple, si j'ai 300px; j'affiche une seule div par ligne centrée avec 50px de chaque coté. Si j'ai 450px de large, j'affiche 2 div avec si possible ~17px de marges. A plus de 600px, j'en affiche 3 avant de retourner à la ligne etc...

Est-ce que les CSS peuvent m'aider, ou suis-je parti sur un truc ingérable ?

En vous remerciant !

[beekeep]

Bonjour,

c'est possible avec Flexbox:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

.container {   display: flex; /* or inline-flex */ }

• Article sur Developpez.com
• Ou guide plus complet

[comode]

En effet, c'est pas mal du tout !

Je pense que je vais pouvoir me débrouiller avec ça, mais histoire de ne pas passer à coté de quelque chose, existe t-il une solution aussi élégante pour gérer les retours à la ligne des DIV quand il n'y a plus assez de place sur une ligne plutôt qu'il ne réduise leur largeur ?

En te remerciant pour ton aide !

[beekeep]

Je ne sais pas.