Css의 디스플레이 박스

-1

모든 게임에서 자신의 성공에 따라 모든 단일 사용자에 대해 CSS로 상자를 표시하고 싶습니다. 예를 들어, 사용자가 내 웹 사이트에서 70 점을 얻었고 너비가 약 220 픽셀 인 상자가 있고 70 (글꼴 크기 : 80px 및 다른 글꼴 패밀리)가 표시되고 바로 아래에 '나쁘지 않음'이라고 표시됩니다 약 20px 및 Times New Roman 글꼴 군). 또는 그/그녀가 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

외부 태그에 span 대신 div를 사용하십시오. 그리고 다음에 코드와 질문의 형식을 올바르게 지정하기 전에 시간을내어 게시하십시오! – bfavaretto

이 하나의 방법입니다 :

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

주 나는 span 대신에 내용을 포장 div을 사용했습니다, 그리고 나는 불필요한 br 요소를 제거했습니다 .

JS Fiddle demo.

출처

2012-08-14 23:15:14

Css의 디스플레이 박스

답변

관련 문제