Existe-t-il un moyen de justifier l'alignement des éléments HTML flottants avec CSS?

Essentiellement, j'essaie d'obtenir l'effet de "text-align: justify" mais avec des éléments flottants. J'ai plusieurs blocs que je veux justifier - aligner.Existe-t-il un moyen de justifier l'alignement des éléments HTML flottants avec CSS?

Ie. chaque ligne est espacée horizontalement différemment pour s'assurer que les longueurs de chaque ligne sont les mêmes. (Bord droit non déchiré).

Existe-t-il un moyen de le faire avec CSS? Sinon, existe-t-il une bibliothèque JS appropriée pour y parvenir? Ou est-ce juste infaisable?

Source

2010-12-06 rocketmonkeys

Il serait utile si vous avez posté un échantillon de ce que vous avez fait jusqu'à présent, ou une maquette de ce que vous essayez d'atteindre. – Phrogz

Quels sont ces blocs? Images? Aussi, ont-ils une taille égale? –

Je travaillerais si vous définissiez display: inline-block sur les blocs au lieu de les faire flotter. –

Si les éléments ne sont pas réellement float ing, vous pouvez utiliser position:absolute; left:1em; right:1em pour que CSS calcule la largeur des éléments pour vous en fonction des décalages de certains parents positionnés.

Si vous n'utilisez que float car vous avez des éléments de niveau bloc que vous essayez de faire circuler, utilisez display:inline-block sur les éléments au lieu de les faire flotter. Si l'élément parent a text-align:justify cela devrait vous donner l'effet (j'imagine) que vous voulez.

Voici un simple test vous montrant le résultat de inline-block avec text-align:justify.

Modifier: J'ai mis à jour le test simple pour montrer plus clairement que les bords gauche et droit sont toujours alignés à l'exception de la dernière ligne.

Source

2010-12-06 22:48:37 Phrogz

variation sur la démo: http://jsfiddle.net/mfmfR/2/ –

qui est l'effet prévu, mais cela ne fonctionne pas dans IE7. Je l'ai modifié pour IE7 (http://jsfiddle.net/mfmfR/3/), et je pense que c'est peut-être la réponse que je cherche. Je vais devoir vérifier que cela fonctionne réellement pour mon code existant. Merci pour le pointeur! – rocketmonkeys

cela fonctionne, mais il y a un peu de problème: la dernière ligne ne s'aligne pas, y a-t-il une solution pour cela, comme justifier pleinement? –

En remplissant la réponse précédente, si vous souhaitez aligner des nœuds DOM créés par programme (par exemple en utilisant document.createElement et parentElement.appendChild dans javaScript), aucun espace blanc ne sera ajouté entre les éléments alignés. Cela peut causer le non fonctionnement de l'alignement.

Sur mon Google Chrome 56.0.2924.87 et Firefox navigateurs 51.0.1 (64 bits), Aligement ne fonctionne pas s'il n'y a pas d'espaces blancs pour séparer les éléments div:

https://jsfiddle.net/jc5qwyaw/

Il y a un exemple lorsque je crée des noeuds DOM par javaScript:

https://jsfiddle.net/oa8yeudr/

Si vous commande uncomment wrapDiv.appendChild(document.createTextNode(" "));, vous pouvez voir la différence. Une solution possible peut être l'ajout d'un nœud de texte espace blanc après les nœuds div comme l'illustre l'exemple ci-dessus.

Testé uniquement sur Chrome 56.0.2924.87 et Firefox 51.0.1 (64 bits).

Source

2017-02-07 18:27:57

Existe-t-il un moyen de justifier l'alignement des éléments HTML flottants avec CSS?

Répondre

Questions connexes