段落末尾的CSS块定位

我想抄录Edsger Dijkstra教授的一些EWD，但遇到一个小问题。在他的写作中，他喜欢在段落末尾放置诸如“证明结束”之类的评论，当有空间时则对齐，否则就在下一行。我想重新创建这种格式，但似乎无法这样做。我真的更喜欢只使用CSS的解决方案，但如果证明不可能，JavaScript也是允许的。段落末尾的CSS块定位

请参阅页码0（PDF第2页）上的http://www.cs.utexas.edu/users/EWD/ewd10xx/EWD1001.PDF注释“Legenda的结尾”和页码3（PDF的第5页）注释“注释结束”。

我试过使用@starx回答的显示：block/float: right组合。但是，由于它是一个浮点数，它不会移动文本的其余部分。仔细查看源文档，格式似乎是特别的，但似乎Dijkstra喜欢在可能的情况下保持它在同一行上，或者将它移动到下一个，如果不是，则右对齐。

通过不同的CSS规格搜索，但我还没有找到一种方法来实现这一点。

来源

2012-04-16 Dibbeke

您提供的任何示例都不会在源文档中右对齐。第一个例子似乎缩进了很多。第二个例子看起来和段落中的另一个句子一样。 – 2012-04-16 22:03:37

事实上，他似乎将“注记结束”标记内联，但Legenda和Proof分开放置。我需要撤回我的问题。 – Dibbeke 2012-04-16 22:28:31

我的建议是使用:after伪元素在适当的段落的末尾添加标题：

.remark:after { 
    content: 'End of Remark'; 
    color: red; 
    display: inline-block; 
    float: right; 
}

例子：http://dabblet.com/gist/2406457

来源

2012-04-17 14:50:20 JoeJ

假设，您正在向该元素提供类block。

.block { 
    display: block; 
    width: 200px; /* minimum needed to be inline */ 
    float: right; 
}

来源

2012-04-16 22:00:58 Starx

如果(End of sth)文本必须是在自己的行，然后使它的块（也可能是已经是一个块，如果它是一个段落或HTML5 footer元素，但那么它不会改变任何东西;））并将文本向右对齐text-align: right;。
如果文字是不完全100％正确的，那么你可以用它width或padding-right玩：

.end_of { 
    display: block; 
    text-align: right; 
    padding-right: 20px; 
}

编辑：默认情况下，呈现为一个块的元素是宽100％。没有浮动，不需要清除任何浮动中的下一个元素或先前浮动中的清除块元素。

来源

2012-04-16 22:38:27 FelipeAls

如果浮动额外的内容的权利，您还需要清除浮点数，否则额外的内容将与文本的其余部分发生冲突。

所以这是我的解决方案。在所有主流浏览器上进行测试。

.theEnd:after { 
display:block; 
content:'End of Latin'; 
text-align:right; 
white-space:nowrap; 
padding-left:1em; 
float:right; 
} 

.theEnd + * {clear:right}

请参阅jsFiddle。

来源

2012-04-17 15:18:43

段落末尾的CSS块定位

回答

相关问题