段落末尾的 CSS 块定位答案

【问题标题】：CSS block positioning at end of paragraph段落末尾的 CSS 块定位
【发布时间】：2012-04-17 23:18:43
【问题描述】：

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

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

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

搜索了不同的 CSS 规范，但我还无法找到实现此目的的方法。

【问题讨论】：

您提供的两个示例在源文档中似乎都没有右对齐。第一个示例似乎缩进了很多。第二个例子似乎被视为与段落中的另一个句子相同。
确实，他似乎将“备注结束”标记内联，但 Legenda 和 Proof 位于不同的行。我需要撤回我的问题。

标签： html css dijkstra

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

【解决方案3】：

如果这个 (End of sth) 文本必须在自己的行上，则将其设为一个块（如果它是一个段落或 HTML5 footer 元素，它可能已经是一个块，但它不会改变任何东西；））并将文本与text-align: right; 对齐。
如果文本不是 100% 正确，那么您可以使用它的 width 或 padding-right：

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

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

【讨论】：

【解决方案4】：

如果将多余的内容浮动到右边，还需要清除浮动，否则多余的内容会与其余的文字冲突。

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

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

.theEnd + * {clear:right}

见jsFiddle。

【讨论】：