Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/html/84.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181

Warning: file_get_contents(/data/phpspider/zhask/data//catemap/0/vba/17.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Html CSS垂直文本需要很大的空间_Html_Css_Vertical Text - Fatal编程技术网

Html CSS垂直文本需要很大的空间

Html CSS垂直文本需要很大的空间,html,css,vertical-text,Html,Css,Vertical Text,我正在使用CSS创建垂直文本。问题是,我想把文本放在前一个div的旁边,前后不留空格。我怎样才能解决这个问题 <div id="wrapper"> <div class="pull-left"> here is some stuff </div> <div class="pull-left verticalText changeCursor">I'm vertical</div> </div> 谢谢

我正在使用CSS创建垂直文本。问题是,我想把文本放在前一个div的旁边,前后不留空格。我怎样才能解决这个问题

<div id="wrapper">
  <div class="pull-left">
      here is some stuff
  </div>
  <div class="pull-left verticalText changeCursor">I'm vertical</div>
</div>

谢谢你的帮助

问题在于默认情况下,
将尽可能宽。另外,当你进行变换时,原点默认在元素的中间。

如果让它们
显示:内联块
并添加

transform-origin: 0 0;
对于
.vertical text
规则,则文本结束于第一个文本的右侧,但与第一个文本重叠。要解决此问题,可以使用
translate()

你说的“旁边”是什么意思?一张你想要的图片会很有帮助。这里的图片红色的是div1,白色的是文本div,黑色的是下一个div
transform-origin: 0 0;
#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%);
}