2

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

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

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

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

4

4 回答 4

2

block假设，你正在给元素上课。

.block {
    display: block;
    width: 200px; /* minimum needed to be inline */
    float: right; 
}
于 2012-04-16T22:00:58.347 回答
1

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

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

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

于 2012-04-17T14:50:20.107 回答
0

如果此文(End of sth)本必须在自己的行上，则将其设为一个块（如果它是段落或 HTML5footer元素，它可能已经是一个块，但它不会更改任何内容；））并将文本与text-align: right;.
如果文本不是完全 100% 正确，那么您可以使用它的width或使用padding-right：

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

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

于 2012-04-16T22:38:27.557 回答
0

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

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

.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-17T15:18:43.357 回答