2

Edsger Dijkstra 教授の EWD の一部を転記しようとしていますが、少し問題が発生しています。彼の文章では、'End of Proof' などのコメントを段落の最後に配置するのが好きで、余裕がある場合は右揃え、それ以外の場合は次の行に配置します。このフォーマットを再作成したいのですが、できないようです。CSS のみを使用したソリューションを希望しますが、それが不可能な場合は JavaScript も使用できます。

http://www.cs.utexas.edu/users/EWD/ewd10xx/EWD1001.PDFのページ番号 0 (PDF の 2 ページ目) のコメント「End of Legenda」とページ番号 3 (PDF の 5 ページ目) を参照してください。コメント「発言の終わり」。

block / float: right@starx が回答した display: コンボを使用してみました。ただし、フロートであるため、残りのテキストは下に移動しません。ソース文書を見ると、書式設定はその場しのぎのように見えますが、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 に答える