CSS вертикальный текст нужно много места

Я использую 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 (тянуть налево от Bootstrap):

.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); 
}

Спасибо за вашу помощь!

источник

2014-10-25 skyscraper

Что именно вы имеете в виду под "рядом"? Изображение того, что вы хотите, было бы очень полезно. – Pointy

вот картинка http://www.directupload.net/file/d/3786/4ylg97i9_jpg.htm красный - это div1, белая область - текст-div, черный будет следующий div – skyscraper

Проблема в том, что по умолчанию <div> будет настолько широким, насколько это возможно. Кроме того, когда вы выполняете преобразование, начало координат по умолчанию находится в середине элемента.

Если вы сделаете их display: inline-block и добавить

transform-origin: 0 0;

к .vertical-text правилу, то текст заканчивается справа от первой, но она перекрывает его. Чтобы исправить , что, вы можете использовать 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.

источник

2014-10-25 16:32:51 Pointy

спасибо - thats it – skyscraper

CSS вертикальный текст нужно много места

ответ

Смежные вопросы