2014-10-25 12 views
1

CSS를 사용하여 세로 텍스트를 만듭니다. 문제는 앞의 div 옆에 텍스트를두고 싶거나 그 사이에 공백을 넣지 않기를 원합니다. 이 문제를 어떻게 해결할 수 있습니까?CSS 수직 텍스트의 공간이 많이 필요합니다.

<div id="wrapper"> 
    <div class="pull-left"> 
     here is some stuff 
    </div> 
    <div class="pull-left verticalText changeCursor">I'm vertical</div> 
</div> 
(부트 스트랩에서 왼쪽으로 당겨)

CSS : 당신의 도움에 대한

.changeCursor 
{ 
    cursor: pointer; 
} 

.verticalText 
{ 
    height: 100%; 
    -moz-transform: rotate(90deg); 
    -webkit-transform: rotate(90deg); /* f&uuml;r Safari und Co */ 
    -o-transform:rotate(90deg); /* Opera */ 
    -ms-transform:rotate(90deg); /* MS IE 9 */ 
    transform: rotate(90deg); 
} 

감사합니다!

+0

은 정확히 "옆에"무엇을 의미합니까? 당신이 원하는 그림이 매우 도움이 될 것입니다. – Pointy

+0

여기 그림 http://www.directupload.net/file/d/3786/4ylg97i9_jpg.htm 빨간색은 div1, 흰색 영역은 텍스트 div이고 검은 색은 다음 div가됩니다. – skyscraper

답변

1

기본적으로 <div>은 최대한 넓게 나타날 것입니다. 또한 변환을 수행 할 때 기본적으로 원점은 요소의 중간에 있습니다. 당신이 그 (것)들에게 display: inline-block을하고 .vertical-text 규칙에

transform-origin: 0 0; 

를 추가하는 경우

는 다음 텍스트는 첫 번째의 오른쪽 끝,하지만 그것을 겹칩니다., 당신은 translate()을 사용할 수 있습니다 해결하려면 :

#wrapper > div { display: inline-block; } 

.verticalText 
{ 
    transform-origin: 0 0; 
    -moz-transform: rotate(90deg) translate(0, -100%); 
    -webkit-transform: rotate(90deg) translate(0, -100%); /* f&uuml;r Safari und Co */ 
    -o-transform: rotate(90deg) translate(0, -100%); /* Opera */ 
    -ms-transform: rotate(90deg) translate(0, -100%); /* MS IE 9 */ 
    transform: rotate(90deg) translate(0, -100%); 
} 

Here is a CodePen.

+0

감사합니다. – skyscraper