CSS中旋转的元素会正确影响其父级的高度 [英] Rotated elements in CSS that affects their parent's height correctly

问题描述

假设我有几个列，其中一些我想旋转的值：

可以在此处找到此解决方案： http://kizu.ru/en/fun/rotated-text/

Let's say I have a couple of columns, of which some I'd like to rotate the values of:

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>

With this CSS:

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

It ends up looking like this:

Is it possible to write any CSS that will cause the rotated element to affect its parent's height, such that the text would not overlap the other elements? Something like this:

解决方案

Use percentages for padding and a pseudoelement to push the content. In the fiddle I left the pseudoelement red to show it and You'll have to compensate the shift of the text but I think that's the way to go.

http://jsfiddle.net/MTyFP/7/

A write-up of this solution can be found here: http://kizu.ru/en/fun/rotated-text/

这篇关于CSS中旋转的元素会正确影响其父级的高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！