회전 된 텍스트 주위에 텍스트 배치시 문제가 발생했습니다.

Question

작업중인 취미 사이트에서 정보 그래픽/데이터 패널을 만들려고합니다. 이 주위에 배치 텍스트를 지원하여 세로 합계 회전 중 하나에 대한 텍스트를 표시하고 싶습니다 그러나 나는이 올바르게 정렬 점점 큰 어려움을 겪고있어. 대신 I에서 진행 상태 페이지에서 내 작품을 표시 할 수 있습니다 붙여 넣기 코드의

:

http://www.footy-results.co.uk/

내가 일을 얻을 수없는 정보를 그래픽 패널은 '148 개 팀의 ... 희망입니다 문제는 CSS 마법사에게 명백합니다!

힌트 또는 팁을 주시면 감사하겠습니다.이 문제를 해결할 수있는 사람은 누구나 출시 할 때 사이트에 적립됩니다!

Answer 1

나는 해결책이 있지만 그게 100 % 깨끗한 것은 아닙니다. 제 의견으로는 마이너스 마진을 사용할 수 없지만 다른 해결책을 찾을 수는 없습니다. 또한 요소의 높이와 너비를 정의해야합니다.

<span> 요소를 <div>에 배치해야합니다. 그런 다음 <div>을 올바르게 배치하면 텍스트가 그 주위에 떠있게됩니다. 여기에 코드 :

HTML :

<div class="infoPanel"> 
    <span class="infoPanelVertical"> 
     <div class="spanwrapper"> 
      <span class="infoNumberVertical">148 TEAMS</span> 
     </div> your text here... 
    </span> 
</div> 

CSS :

.spanwrapper { 
    float: left; 
    height: 157px; 
    position: relative; 
    width: 48px; 
} 

.infoNumberVertical { 
    background-color: #F5F5F5; 
    border: 1px dotted #DDDDDD; 
    color: #1A3C7B; 
    float: left; 
    font-size: 32px; 
    font-weight: bold; 
    margin-left: -56px; 
    margin-top: 60px; 
    transform: rotate(-90deg); 
    width: 150px; 
} 

문제는 당신이 그것에 그렇지 않으면를 높이와 포장 <div>에 폭 또는 범위를 제공해야한다는 것입니다 텍스트는 어디에 떠 있어야하는지 모릅니다. 너비 나 높이를 정의하지 않으면 텍스트가 큰 사각형 인 회전 텍스트 주위를 감쌀뿐입니다. CMS를 사용하고 있거나 내용을 동적으로 채우고 싶습니다. 이것은 나쁜 해결책입니다. 하지만 당신은 또한 너비와 높이 trough js를 정의 할 수 있습니다.하지만 그건 내가 생각하기에 좀 해킹 된 해결책입니다.