-1

ゲームでの成功に応じて、すべてのユーザーの css にボックスを表示したいと考えています。たとえば、あるユーザーが私の Web サイトで 70 ポイントを獲得すると、幅約 220 ピクセルのボックスが表示され、70 (font-size:80 ピクセルと異なるフォント ファミリ) が表示され、そのすぐ下に「悪くない」と表示されます(約 20 px および Times new Roman フォント ファミリ)。または、彼/彼女が30ポイントを獲得した場合、そのボックスをポイント30として表示し、その下に「悪い」と表示したい. 私が使用したコードはまったく機能していないようです。その出力は非常に異なり、ばかげています。または、スコアが変化するたびに変化し続けます。つまり、ボックスは安定していません。コード:

 <span style="font-family: 'Londrina Shadow', cursive; font-size:80px; color:#990;width:220px; padding:10px;border:5px solid gray; margin:0px;">
                70

                  <span style="font-size:18px; font-family:Georgia, 'Times New Roman', Times, serif; color:#CCC;">
                  <br>
                Not Bad
                </span>
                </span>

私が期待した出力はこのようなものです（70は「悪くない」よりもはるかに大きいです）

I------------I
I    70      I
I   Not Bad  I
I            I
I------------I

これどうやってするの？必要なことについてよく説明していただければ幸いです。CSSの新機能...ありがとう

4

1 に答える 1

0

これは 1 つのアプローチです。

div {
    display: inline-block; /* stops the div taking the full width, allowing
                              multiple 'boxes' to appear on the same line */
    border: 1px solid #000;
    width: 220px;
    font-size: 1em;
    text-align: center; /* just because your text seemed centre-aligned;
                           adjust to taste */
}

div > span {
    display: block; /* to force a new-line, and allow a width declaration */
    font-size: 80%; /* font-size 80% of the parent div */
}​

divの代わりにコンテンツをラップしていたことに注意してください。また、不要な要素spanを削除しました。br

JS フィドルのデモ。

于 2012-08-14T23:15:14.460 に答える