在Css中的显示框

-1

我想根据他们在任何游戏中的成功为每个用户在CSS中显示框。例如，用户在我的网站上得到70分，并且会有一个大约220px的框，它显示70（font-size：80px和不同的字体系列），并且在它的正下方，它会说“不好”（约20像素和Times新罗马字体家族）。或者如果他/她得到30分，我想将该框显示为他们的分数30，并且在它下面显示“差”。我用它的代码似乎根本不工作。它的输出是非常不同和愚蠢的。或者当分数变化时，它每次都在变化。换句话说，箱子不稳定。这些代码：在Css中的显示框

<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 ... 感谢

来源

2012-08-14 user893970

在您的外部标签上使用div而不是span。下次请在发布之前花些时间正确地设置代码和问题的格式！ – bfavaretto 2012-08-14 23:06:11

这是一个方法：

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 Fiddle demo。

来源

2012-08-14 23:15:14

在Css中的显示框

回答

相关问题