펼쳤던는 모든 사업부

Question

첫째,이 acheive하려고 무엇의 이미지를 따라 텍스트를 회전

http://i.imgur.com/3BpFF.png

단어 'DIV'에서 가진 흰색 상자 분명히 내가 가진 사업부입니다. 제 목적을 위해, width:500px; margin: 0 auto;을 사용하는 페이지에서 div를 사용합니다. 내가 원했던 것은 위의 'Holy'(샘플 텍스트)와 같이 div의 상단을 따라 회전 된 텍스트 (-moz-transform: rotate(90deg)을 사용하거나 접두어를 회전)를 정렬 할 수있게하는 것입니다. 그 중요성은 없지만 해당 div에 대한 기준선을 설정하고 싶습니다.

그런데 필자는 Firebug에서 텍스트를 정렬하기 위해 절대 위치 지정을 사용했습니다. 픽셀 위치 지정을 사용하여 해킹당했습니다. 글꼴 크기를 늘리거나 div의 위치를 ​​변경하면 글꼴이 깨지기 때문에 매우 유연하지 않습니다.

기타 : SASS와 다른 것들을 사용하고 있습니다 (아직 어떤 경험이 없지만 도움이 될만한 변수를 사용할 수 있다고 생각합니다).

Answer 1

당신은 당신의 .css 파일 (여백 정상 & 마진 - 하단 그냥 예) 당신은 CSS 변환을 사용할 수있는 경우

div { 
    width:500px; 
    margin: 0px auto; 
} 

.holly { 
    margin-top:20px; 
    margin-left:520px 
    /* Safari */ 
    -webkit-transform: rotate(90deg); 

    /* Firefox */ 
    -moz-transform: rotate(90deg); 

    /* IE */ 
    -ms-transform: rotate(90deg); 

    /* Opera */ 
    -o-transform: rotate(90deg); 

    /* Internet Explorer 9*/ 
    -ms-transform: rotate(90deg); 

    /*undefined prefix*/ 
    transform: rotate(90deg); 
} 

Answer 2

그것은 당신이 의사 요소를 사용할 수 있다는 것을 의미에서 이런 식으로 뭔가를 배치 할 수 있습니다 CSS 코드. 그러면 나는 "홀리"파트를 :after 의사 요소를 통해 추가 할 것입니다.

div:after{ 
    content:"Holy"; 
    line-height:20px; 
    position:absolute; 
    background:yellow; 
    padding:0 10px; 
    left:100%; top:0; 
    -webkit-transform:rotate(90deg) translateY(-100%); 
    -webkit-transform-origin:0 0; 
} 

당신이 볼 수 있듯이 그때 translate Y를가 translateX으로 작동하기 전에 우리가 일을 회전하기 때문에, 사업부에서이 부분을 이동 translateY를 사용했습니다. transform-origin은 0으로 설정됩니다.

이 코드는 div 크기와 독립적입니다.

봐 여기가 살고에서 :

http://jsbin.com/akaziy/2/