☰

CSS で回転した要素が親の高さに正しく影響する 質問する

tag-icon • tag-icon css css-transforms
CSS で回転した要素が親の高さに正しく影響する 質問する

いくつかの列があり、そのうちのいくつかの値を回転したいとします。

http://jsfiddle.net/MTyFP/1/

<div class="container">
    <div class="statusColumn"><span>Normal</span></div>
    <div class="statusColumn"><a>Normal</a></div>
    <div class="statusColumn"><b>Rotated</b></div>
    <div class="statusColumn"><abbr>Normal</abbr></div>
</div>

この CSS では:

.statusColumn b {
  writing-mode: tb-rl;
  white-space: nowrap;
  display: inline-block;
  overflow: visible;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
}

最終的には次のようになります。

4 つのブロックレベル要素のシリーズ。3 番目の要素のテキストは回転します。

回転した要素が親要素の高さに影響し、テキストが他の要素と重ならないようにする CSS を記述することは可能ですか? 次のようになります:

3 番目の列のテキストは、テキストがボックス内に収まるように親ボックスの高さに影響します。

ベストアンサー1

としてG-Cyrのコメント正しく指摘している、現在のサポートはwriting-mode十分以上です単純な回転と組み合わせると、希望どおりの結果が得られます。以下の例を参照してください。

.statusColumn {
  position: relative;
  border: 1px solid #ccc;
  padding: 2px;
  margin: 2px;
  width: 200px;
}

.statusColumn i,
.statusColumn b,
.statusColumn em,
.statusColumn strong {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
  display: inline-block;
  overflow: visible;
}
<div class="container">
  <div class="statusColumn"><span>Normal</span></div>
  <div class="statusColumn"><a>Normal</a></div>
  <div class="statusColumn"><b>Rotated</b></div>
  <div class="statusColumn"><abbr>Normal</abbr></div>
</div>

おすすめ記事