Css中的显示框

我想根据每个用户在任何游戏中的成功程度，为他们显示css框。例如，一个用户在我的网站上得到70分，将有一个大约220px宽的框，它显示70（字体大小：80px和不同的字体系列）。在它的正下方，它会说“不错”（大约20px和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>

我该怎么做？我希望我能很好地解释我需要什么。新的css。。。 谢谢

这是一种方法：

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

元素

---

.

在外部标记上使用div而不是span。下一次请在发布之前花些时间将代码和问题正确格式化！

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 */
}​