在另一个内部旋转div元素

时间:2013-02-03 15:34:05

标签: html css css3 rotation rotatetransform

我为你准备了一个小提琴来展示我的问题:

我需要将一些文本放在div标签内,以便它垂直显示。 到目前为止没问题。

http://jsfiddle.net/pSDLY/

HTML:

<div class="board">
  <div class="boardheading">
     <div class="verticalText">AVeryLongLongLongLongWord</div>
  </div>
  <div class="boardelement">
      Some larger content here<br>
      Some larger content here<br>
      Some larger content here<br>
  </div>
</div>    

相关CSS:

div .boardheading {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    padding: 5px;
    border-style: solid;
    overflow: visible;
    background: blue;
    /*See here: I want to have a fixed width and an automatically calculated height*/
    width: 20px;
}

div .verticalText {
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    transform: rotate(-90deg);
}

但是正如你所看到的,div的高度并不适合他的内容。宽度也没有。我希望宽度尽可能小(20px对我来说应该是合适的尺寸,但是设置宽度没有任何影响,就像你在小提琴中看到的那样)

有关如何达到此目标的任何想法?

1 个答案:

答案 0 :(得分:0)

这应该让你朝着正确的方向前进。

div .verticalText {
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    transform: rotate(-90deg);
    background: blue;
    padding: 5px;
    border-style: solid;
}