0

私の問題が何であるかを示すために、フィドルを用意しました。

縦に表示されるように、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 の高さはコンテンツに合わせて調整されていません。幅もありません。幅をできるだけ小さくしたい (20 ピクセルが適切なサイズである必要がありますが、幅を設定しても、フィドルでわかるように効果はありません)

これに到達する方法についてのアイデアはありますか?

4

1 に答える 1

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;
}
于 2013-02-03T15:47:16.977 に答える