I have some lines of text. I want the last one right-aligned so that the text forms a nice column.
开发者_运维技巧This is the sort of thing I want to achieve:
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."
Can I tell that last line: "right-align yourself to the right edge of the text above you"?
I would really prefer not to have to give the text a width manually (even in em
s), because I don't want the lines to break if the user resizes or changes fonts.
float
the element containing the paragraph, float: left
the content, and float: right
the last line. The floated container will be as wide as the whole paragraph, so right-floating the last line will cause its right edge to line up with the right edge of the preceding text.
Example:
<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>
If you need the whole thing to be centred within its parent container, you can set the topmost to text-align: center
and use display: inline-block
for the text container. I don't think you need to float it if you use this method:
<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>
精彩评论