Comment espacer correctement les divs (chacun d'une largeur différente) à l'intérieur d'un div parent?
J'ai vu cette solution pour espacer uniformément DIVs: ( Liquide de largeur espacés de façon égale, les DIVs ), mais il exige que les DIVs sont toutes de la même largeur. Cela ne fonctionne pas dans mon cas. J'ai 5 DIVs qui sont tous de différentes largeurs et tiens à les espacer uniformément. Est-ce possible sans javascript?
Par exemple:
<!-- The text should not wrap, but be on one line for each div -->
<div class="item" id="item1">Item One</div>
<div class="item" id="item2">Item # Two</div>
<div class="item" id="item3">Item Three</div>
<div class="item" id="item4">Item Four</div>
<div class="item" id="item5">Item Five, the Last</div>
J'en ai besoin pour travailler dans IE8+, Firefox 4+, Chrome, Safari.
EDIT: Une autre exigence: les divs ne devrait avoir aucun espace à droite de la dernière DIV ou à gauche de la première DIV. Donc, l'espace entre eux est égal à la différence entre la somme des largeurs et de la largeur de la div conteneur.
Définir "l'espace de façon uniforme"
la même quantité d'espace blanc entre les bords de chaque DIV
Si c'est vraiment votre seule exigence, il suffit d'utiliser la même gauche/droite de la marge pour chaque, et de désactiver la marge de gauche pour la plus à gauche de, à droite de la marge pour la plus à droite.
Comment pourrais-je le faire si je ne connais pas la div à l'largeurs à l'avance (puisque chaque navigateur rend le texte un peu différentes largeurs de même avec "px")?
comment pouvez-vous définir la largeur de l'intérieur de la balise div et le div conteneur?
la même quantité d'espace blanc entre les bords de chaque DIV
Si c'est vraiment votre seule exigence, il suffit d'utiliser la même gauche/droite de la marge pour chaque, et de désactiver la marge de gauche pour la plus à gauche de, à droite de la marge pour la plus à droite.
Comment pourrais-je le faire si je ne connais pas la div à l'largeurs à l'avance (puisque chaque navigateur rend le texte un peu différentes largeurs de même avec "px")?
comment pouvez-vous définir la largeur de l'intérieur de la balise div et le div conteneur?
OriginalL'auteur Don Rhummy | 2014-02-06
Vous devez vous connecter pour publier un commentaire.
vous pouvez utiliser : display:flex; sur un conteneur parent
DÉMO: http://codepen.io/anon/pen/wxtqJ
des frontières supplémentaires et d'arrière-plan pour la démo but.
Si vous avez besoin d'une alternative qui fonctionne pour les anciens nav, vous pouvez utiliser text-align:justifier propriétés: http://codepen.io/anon/pen/FnDqr .
Cela ne fonctionne pas avec IE8+. Et ce que les autres post a la réponse? J'ai seulement vu une réponse de taille égale, de la Vrd, dont la mienne ne le sont pas.
ce post vous lié à une stackoverflow.com/questions/6865194/... , pour IE8, il doit travailler moins , c'comprendre :après les pseudo-éléments, sauf si vous utilisez un caprice de mode.
peut-être que vous devriez le tester en mode page entière avec IE8, s.codepen.io/gc-nomade/fullpage/GyiCv?
... C'est à dire les besoins de la police-taille:0.01 px et ne font-size:0; afin de montrer que l'après-élément :)... oublié ce
OriginalL'auteur G-Cyr
Je préfère display:flex; comme dit dans la réponse précédente.
Mais il y a une autre solution si j'ai bien compris les exigences correctement. Depuis je n'ai pas de IE8 TestVM ici, je laisse le tester pour vous.
Vous pouvez utiliser display: table;
Solution suivante:
Avec ce HTML
Test de violon: http://fiddle.jshell.net/HLFXH/
merci à vous, je suis conscient de cela. C'est une honte, mais nous sommes habitués à de la frustration avec IE... arent nous? 😉
J'ai l'étrange sentiment que j'ai raté quelques unes de ces exigences... Parce que si c'était si facile, il y aurait eu plus de réponses... @l'op si j'ai oublié quelque chose merci d'ajouter un commentaire.
vous ne Voyez ma réponse n'est pas à propos de l'affichage-flex Droit? Si la réponse ne convient Pas merci de me Dire ce qui est manquant
OriginalL'auteur Nico O