web-dev-qa-db-fra.com

Comment espacer uniformément de nombreux éléments inline-block?

Est-il possible d'espacer uniformément de nombreux éléments dans un div de largeur variable?.

Voici exemple ne fonctionne pas . Si nous utilisons text-align: center; les éléments seront centrés, mais la marge: 0 auto; ne fonctionne pas. Je veux accomplir quelque chose comme justification + centre:

|..<elem>..<elem>..<elem>..<elem>..|       // for one container width
|..<elem>..<elem>..<elem>..|               // for smaller container width
|....<elem>....<elem>....|                 // even smaller container

Le conteneur sera redimensionnable par l'utilisateur. Une image vaut 1000 mots: 

enter image description here

Largeur du conteneur (boîte rouge): 100%; Donc, l'utilisateur peut le redimensionner (fenêtre du navigateur, js, peu importe).
<-> représente des espaces pairs. Dans la deuxième rangée <-> sont plus grandes car il y a plus de place. J'ai pu le simuler avec:

text-align:center;
Word-spacing:3em;    // but any fixed value looses proportion
htmlpositioningcss
23
CoR

J'ai récemment lu une technique très intelligente pour faire exactement ce que vous demandez.

En bref, vous devez simplement utiliser text-align:justify; sur l'élément conteneur pour y parvenir, en conjonction avec un bloc invisible supplémentaire à la fin.

Cela fonctionne car les éléments inline-block sont considérés comme faisant partie du contenu du texte, chacun étant en réalité un mot unique.

L’utilisation de justify permet d’étaler les mots dans votre texte afin qu’ils remplissent toute la largeur de l’élément avec un espace supplémentaire entre les mots. Pour les éléments inline-block, cela signifie qu'ils sont espacés les uns des autres.

J'ai mentionné un bloc invisible supplémentaire à la fin. Ceci est nécessaire parce que text-align:justify normal ne justifiera pas la dernière ligne de texte. Pour un texte normal, c'est exactement ce que vous voulez, mais pour aligner les cases inline-block, vous voulez qu'elles soient toutes alignées.

La solution consiste à ajouter un élément supplémentaire invisible mais à 100% de largeur à la fin de votre liste d'éléments inline-block. Cela deviendra effectivement la dernière ligne de texte et la technique justify fonctionnera pour le reste de vos blocs.

Vous pouvez utiliser le pseudo-sélecteur :after pour créer l'élément invisible sans avoir à modifier votre balisage.

Voici une version mise à jour de votre jsFiddle pour démontrer: http://jsfiddle.net/ULQwf/298/

Et voici l'article original qui l'explique plus en détail: http://www.barrelny.com/blog/text-align-justify-and-rwd/

[EDIT] Une dernière mise à jour après avoir vu l'image que vous avez ajoutée à la question. (Je n'ai pas de meilleure réponse, mais quelques idées supplémentaires qui pourraient être utiles).

Idéalement, vous avez besoin ici d'un sélecteur :last-line. Ensuite, vous pourriez text-align:justify le texte principal et text-align:center la dernière ligne. Cela ferait ce que tu veux.

Malheureusement, :last-line n'est pas un sélecteur valide (:first-line est, mais pas :last-line), c'est donc la fin de cette idée.

Une idée légèrement plus optimiste est text-align-last, qui existe existe en tant que fonctionnalité. Cela pourrait faire exactement ce que vous voulez:

text-align:justify;
text-align-last:center;

Parfait.

Sauf que c'est non standard et que le navigateur ne supporte que très peu.

Vous pouvez lisez à ce sujet sur MDN .

Je suppose qu'en dernier recours, cela pourrait être une option pour vous, si vous ne pouvez vivre qu'avec un support partiel du navigateur. Il obtiendrait au moins ce que vous voulez pour certains de vos utilisateurs. Mais ce n'est pas vraiment une façon sensée d'aller.

Mon intuition est que cela soit aussi proche que possible. Tellement proche de ce que vous voulez, mais pas tout à fait là. J'espère avoir tort, mais je serai surpris. Dommage cependant, car cela me semblerait être une chose tout à fait logique de vouloir faire.

34
Spudley

J'ai travaillé sur votre exemple, vous devez faire une combinaison de style bloc/inline puisque seul justifier fonctionne juste pour inline (texte).

div{
    width:530px; /* I changed the div size, because you a have fixed width otherwise you should use scrolling */
    border:1px red solid;
    text-align:justify;    /* You will justify to 100$ of containing div, if you want to "center" just add another div with % size and centered */

}
div span{ /* I worked with your example you may use a class */
    width:60px;
    border:1px yellow solid;
    display: inline-block; /* Inline-block */ 
    position: relative; /* relative to container div*/
}

div:before{
    content: ''; /* position for block element*/
    display: block; /* the block part for the last item*/
    width: 100%;
}

div:after {
    content: '';
    display: inline-block; /* inline-block for the first (and middle elements) */
    width: 100%;
}
3
Ezequiel Gorbatik

Si vous essayez une approche différente, le violon ressemble beaucoup à l'image mais l'espace est fixe dans les deux lignes mais les éléments sont intercalés.

div{
    width:250px; /* I changed the div size, because you a have fixed width otherwise you should use scrolling */
    border:1px red solid;
    text-align:center;    /* You will justify to 100$ of containing div, if you want to "center" just add another div with % size and centered */
}
div span{ /* I worked with your example you may use a class */
    width:60px;
    float:justify;
    border:1px yellow solid;
    display: inline-block; /* Inline-block */ 
      margin-left:2%;
    margin-right:2%;

}
0
Ezequiel Gorbatik