Est-il un moyen de justifier Aligne les éléments HTML flottants avec CSS?

Question

Pour l'essentiel, je suis en train de réaliser l'effet de « text-align: justify » mais avec des éléments de bloc flottant. J'ai de blocs que je veux justifier-align.

Ie. chaque ligne est différemment espacées horizontalement pour faire des longueurs sûres de chaque ligne sont les mêmes. (Non saccadée bord droit).

Est-il possible de le faire avec CSS? Sinon, est-il une bibliothèque appropriée JS pour y parvenir? Ou est-ce juste infaisable?

Answer 1

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

Si vous utilisez uniquement float parce que vous avez des éléments de niveau bloc que vous essayez de flux de fabriquer, d'utiliser display:inline-block sur les objets au lieu de les flottants. Si l'élément parent a text-align:justify cela devrait vous donner l'effet (je suppose que) que vous voulez.

Voici un test simple 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

Answer 2

Fin de réponse précédente, si vous souhaitez aligner des noeuds DOM créés (par exemple programatically à l'aide document.createElement et parentElement.appendChild dans javaScript), pas d'espace blanc sera ajouté entre les éléments alignés. Cela peut causer des non-travail de Aligement.

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 à éléments séparés 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. Solution possible peut être un nœud de annexant texte espace blanc après div noeuds comme exemple ci-dessus montre.

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