Adapté autant de divs que possible horizontalement en HTML et remplissage la largeur de la ligne

Vous pouvez le faire avec le Flexbox Model , il y en a quelques Numérapez cependant.

Il y a un ancien modèle Flexbox, qui rend les choses en quelque sorte compliquées. Actuellement chrome et opéra supportez le nouveau modèle et les autres navigateurs ont un "support partiel", ce qui signifie qu'ils pourraient Soutenir: p>

1. un Version ancienne des spécifications W3
2. un Syntaxe plus ancienne li>
3. ou ils ne sont tout simplement pas venus à mettre en œuvre pleinement le nouveau ou même le vieux modèle et même li> ol>

   avec tout ce qui est disponible aujourd'hui, j'ai pu mettre quelque chose ensemble, ce qui fonctionne dans chrome 26 chrome 26 fort>, Safari 5.1.7 strong>, IE10 Strong>, IE10 en mode IE9 strong> et IE10 en mode IE8 fort>. Malheureusement, ma version actuelle Firefox version 20 forte> n'est pas dans cette liste. Je ne suis pas sûr de savoir si cela fonctionnera dans des versions plus anciennes de Firefox (j'ai ajouté le CSS requis dans le Jsfiddle près du bas du poteau, mais je n'ai pas d'anciennes versions installées sur mon PC). p>

   Ce lien explique pourquoi il ne fonctionne pas dans Firefox 20 forte>. Si vous faites défiler vers le bas de la page, il affirme sur la propriété flex-wrap code>: p>

   Firefox (Gecko) - Non pris en charge. Firefox ne prend en charge que Flexbox une seule ligne. P> BlockQuote>

   Je ne suis pas sûr à 100% à ce sujet, mais il me semble qu'ils n'ont jamais pris en charge la propriété flex-wrap code> même dans les versions plus anciennes. Corrigez-moi si je me trompe, à quiconque avec une version firefox 19 - forte> là-bas, mais je pense que s'ils avaient, Firefox 20 forte> tomberait au moins revenir dessus pour Tant qu'ils n'ont pas encore complètement mis en œuvre le nouveau modèle Flexbox. P>

   Ce Flex-wrap code> La propriété est celle qui fait que la magie multiligne se produise dans la plupart des autres navigateurs . La prévision est que firefox fort> sera Prise en charge du nouveau modèle Flexbox dans la version 22 A>, qui est prévu pour être publié le 25 juin 2013 . grève > Mise à jour: strong> Firefox prend désormais le support le flex-wrap code> Propriété à partir de la version 28 vers le haut. / update strong> p>

   Après tout cela, voici un JSFIDDLE qui fait le travail aussi bien que possible, selon mes recherches récentes. Cela semble être le meilleur que vous puissiez faire dans pure CSS + HTML avec le support de navigateur actuel. P>

   Si vous voulez quelque chose de mieux en ce moment fort>, vous devriez trouver un Js solution. Peut-être jeter un coup d'œil à la source de flexiejs et modifier le code de détection du navigateur afin qu'il gère Firefox 20 Strong> aussi. Box-Pack Code> et Box-Orient CODE> figure sur la liste des propriétés prises en charge de Flexiejs, ce sont les propriétés qui font ce travail sur plus ancienne iOS forte> et Safari strong>. P>

   Modifier strong> Comme @Cimmanon souligne dans les commentaires, pour obtenir ce travail dans les anciens navigateurs, ils auraient besoin de soutien boîte lignes: multiple code> , qu'ils ne le font pas. Donc, cela ne va pas au travail sur les anciennes versions de iOS strong>, Safari strong> et Firefox strong>. Je suppose que cela explique pourquoi Firefox 20 strong> ne dispose pas d'une ancienne mise en œuvre à se replier sur. Étant donné que FlexieJS ne prend pas en charge boîte lignes: multiples code> soit, sa source est probablement ne va pas être d'une grande aide à essayer de résoudre ce problème. La rédaction de votre propre solution JS semble être la seule solution en ce moment strong>. Le développeur de FlexieJS travaille sur un polyfill pour la nouvelle de spécification. Cela devrait inclure un code pour fixer le multiligne dans les anciens navigateurs. Il ne semble pas comme il n'y a aucune au moment même. Si vous allez écrire quelque chose, peut-être vous pouvez le contacter pour quelques idées. le passer votre code si vous le faire fonctionner. Si vous êtes chanceux, il a obtenu quelque chose qui est déjà pas sur GitHub encore p>

   Le CSS:. P>

   #container {
     margin: 100px;
     padding: 10px;
     border: 1px solid blue;
     display: -webkit-box;     /* iOS 6-, Safari 3.1-6 */
     display: -moz-box;        /* Firefox 19- */
     display: -ms-flexbox;     /* IE 10 */
     display: -webkit-flex;    /* Chrome */
     display: flex;            /* Opera 12.1, Firefox 20+ */
   
     /* iOS 6-, Safari 3.1-6 */
     -webkit-box-orient: horizontal;
     -webkit-box-pack: justify;
     -webkit-lines: multiple;  /* Only here for informative purpose, this line is what should have made it work, it has never been implemented */ 
   
     /* Firefox 19- */
     -moz-flex-flow: row wrap;
     -moz-justify-content: space-between;
     -moz-box-lines: multiple; /* Only here for informative purpose, this line is what should have made it work, it has never been implemented */ 
   
     /* Chrome */
     -webkit-flex-flow: row wrap;
     -webkit-justify-content: space-between;
   
     /* IE10 */
     -ms-flex-flow: row wrap;
     -ms-justify-content: space-between;
   
     /* Opera 12.1, Firefox 20+ */
     flex-flow: row wrap;
     justify-content: space-between;
   }
   .item {
     margin: 10px;
     width: 300px;
     border: 1px solid red;
     -webkit-box-flex: auto;    /* iOS 6-, Safari 3.1-6 */
     -moz-box-flex: 1.0;        /* Firefox 19- */
     -webkit-flex: auto;        /* Chrome */
     -ms-flex: auto;            /* IE10 */
     flex: auto;                /* Opera 12.1, Firefox 20+ */
   }