Aligner à droite du texte sur le bord droit du texte ci-dessus?

Question

J'ai quelques lignes de texte. Je veux que le dernier soit aligné à droite pour que le texte forme une belle colonne.

C'est le genre de chose que je veux atteindre:

 
Once upon a midnight dreary, while I pondered, weak and weary, 
Over many a quaint and curious volume of forgotten lore, 
While I nodded, nearly napping, suddenly there came a tapping, 
As of some one gently rapping, rapping at my chamber door. 
"'T is some visiter," I muttered, "tapping at my chamber door— 
           Only this, and nothing more." 

Puis-je dire que la dernière ligne: « vous aligne à droite sur le bord droit du texte ci-dessus vous »?

Je préfèrerais vraiment ne pas avoir à donner une largeur au texte manuellement (même dans em s), car je ne veux pas que les lignes se cassent si l'utilisateur redimensionne ou change les polices.

Answer 1

float l'élément contenant le paragraphe, float: left le contenu, et float: right la dernière ligne. Le conteneur flottant sera aussi large que l'ensemble du paragraphe, si bien que la dernière ligne flottant à droite fera aligner son bord droit avec le bord droit du texte précédent.

Exemple:

<div style="float: left"> 
<span style="float: left"> 
Once upon a midnight dreary, while I pondered, weak and weary,<br/> 
Over many a quaint and curious volume of forgotten lore,<br/> 
While I nodded, nearly napping, suddenly there came a tapping,<br/> 
As of some one gently rapping, rapping at my chamber door.<br/> 
"'T is some visiter," I muttered, "tapping at my chamber door—<br/> 
</span> 
<span style="float: right; clear: left">Only this, and nothing more."</span> 
</div> 

Si vous avez besoin de tout être centré dans son conteneur parent, vous pouvez définir le plus élevé à text-align: center et utiliser display: inline-block pour le conteneur de texte. Je ne pense pas que vous avez besoin de flotter si vous utilisez cette méthode:

<div style="text-align: center"> 
<div style="display: inline-block; text-align: left"> 
<span style="float: left"> 
Once upon a midnight dreary, while I pondered, weak and weary,<br/> 
Over many a quaint and curious volume of forgotten lore,<br/> 
While I nodded, nearly napping, suddenly there came a tapping,<br/> 
As of some one gently rapping, rapping at my chamber door.<br/> 
"'T is some visiter," I muttered, "tapping at my chamber door—<br/> 
</span> 
<span style="float: right; clear: both">Only this, and nothing more."</span> 
</div> 
</div>