28173 sujets

CSS et mise en forme, CSS3

[Résolu] Container contenant un nombre aléatoire de bloc de même taill

exemple
<div id='contenant'>
<div class='box'>contenu box 01</div>
....
<div class='box'>contenu box xx</div>
</div>

Le contenu est généré dynamiquement, je peux ajouter ou supprimer des éléments de class box

le but est que le contenant adapte sa taille et que les blocs se suivent et on passe à la ligne si nécessaire

J'ai essayé plein de choses, des float mais le contenant ne s'adapte pas, même avec un élément clear both. Avec display inline, les blocs sont coupés, j'ai essayé flex mais cela n'a rien donné, j'ai essayé avec display:inline-block, mais les "box" se mettent l'une sur l'autre et ne remplissent pas la ligne.

Un tableau donnerait le meilleur résultat mais , il semble que c'est mal d'utilisé des tableaux pour la mise en page et malheureusement, les écrans ayant des tailles différentes, je ne saurai jamais le nombre de colonne optimal pour remplir mon bloc

je joins une petite illustration, avec 3 blocks, le contenant à la hauteur minimale, on ajoute les blocs au fur et à mesure et la hauteur du contenant s'adapte. upload/50386-exemple.png
Modifié par dpibxl (19 Jun 2013 - 01:30)
salut,
le contenant doit s'adapter à quoi ? Si non un simple "display:inline-block" avec un "vertical-align:top" sur les box te donnera le résultat que tu cherches.
le contenant doit s'adapter au contenu.
normalement, je crée un contenant qui occupe une largeur définie et qui devrait s'adapter en hauteur.

j'avais déjà essayer le inline-block mais sans le vertical-align:top. Je vous tiens au courant et encore merci pour le temps mis à me répondre et a essayer de me comprendre.
je pense que c'est parce que tu n'as pas donné de largeurs à tes box. Si tu ne spécifies pas de largeurs aux div box, ils occuperont toute la largeur.
A première vue et après des tentatives répétées, il semblerait que ce soit IE qui a activer un mode de compatibilité cassant la mise en page.
Pour supprimer le mode compatibilité sur IE :
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">


ou par .htaccess (recomandé) :
<IfModule mod_setenvif.c>
  <IfModule mod_headers.c>
    BrowserMatch MSIE ie
    Header set X-UA-Compatible "IE=Edge,chrome=1" env=ie
  </IfModule>
</IfModule>

Sur le net (et même sur Alsa) vous trouverez facilement des explications sur l'emploi de cette balise.
Modifié par Olivier C (27 Jun 2013 - 22:44)
Sujet clos
Aller à