Question

我正在试图转录一些Edsger Dijkstra教授的EWD教授，但遇到了一个小问题。在他的写作中，他喜欢在段落的末尾添加诸如“End of Proof”之类的评论，在有空间时将其对齐，或者在下一行中进行对齐。我想重新创建这种格式，但似乎无法这样做。我真的更喜欢只使用CSS的解决方案，但如果证明这是不可能的，那么JavaScript也是允许的。

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

我尝试使用@starx回答的显示：block / float: right组合。但是，因为它是一个浮点数，所以它不会移动其余的文本。通过源文档查看，格式化似乎是临时的，但似乎Dijkstra喜欢尽可能将它保持在同一行，或者将其移动到下一个，右对齐，如果不是。

通过不同的CSS规范进行搜索，但我还不知道如何实现这一目标。

Answer 1

假设您正在为该元素提供课程block。

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

Answer 2

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

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

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

Answer 3

如果这个(End of sth)文本必须在它自己的行上，那么将它作为一个块（如果它是一个段落或HTML5 footer元素，它可能已经是一个块但是它不会改变任何事情;））并使用text-align: right;将文本对齐到右边如果文字不完全100％正确，那么您可以使用其width或padding-right进行游戏：

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

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

Answer 4

如果您将额外内容浮动到右侧，则还需要清除浮动内容，否则额外内容将与文本的其余部分冲突。

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

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

.theEnd + * {clear:right}

请参阅jsFiddle。

段落末尾的CSS块定位

4 个答案: