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%; }
它最终看起来像这样：
是否可以编写任何会导致旋转的元素影响其父母高度的CSS，使得文本不会与其他元素重叠？ 像这样的东西：
使用百分比padding和伪元素来推送内容。 在小提琴中，我把红色的伪元素留下来显示出来，你必须补偿文字的移动，但是我认为这是一条路。
这个解决scheme的写法可以在这里find： http : //kizu.ru/en/fun/rotated-text/
不幸的是（？）这是它是如何工作的，即使你旋转你的元素仍然有一定的宽度和高度，这不会改变后旋转。 你直观地改变它，但是当你旋转东西的时候，没有看不见的包装盒会改变它的大小。
想象一下，旋转angular度小于90°（如transform: rotate(45deg) ）：你将不得不引入这样一个不可见的盒子，它基于你正在旋转的物体的原始尺寸和实际的旋转值而具有模糊的尺寸。
突然间，你不仅有你已经旋转的对象的width和height ，但你也有它周围的“看不见的盒子”的width和height 。 想象一下，请求这个对象的外部宽度 – 它会返回什么？ 对象的宽度，还是我们的新盒子？ 我们如何区分两者？
因此，没有可以写入的CSS来解决这个问题（或者我应该说“自动化”）。 当然，你可以手动增加父容器的大小，或者写一些JavaScript来处理。
（只是要清楚，你可以尝试使用element.getBoundingClientRect获得前面提到的矩形）。
如规范中所述 ：
在HTML名称空间中，transform属性不会影响变形元素周围的内容stream。
这意味着，除非您亲自操作，否则不会对正在转换的对象周围的内容进行更改。
当你转换你的对象时唯一考虑的就是溢出区域：
（…）溢出区域的范围考虑了转换后的元素。 这种行为类似于通过相对定位偏移元素时发生的情况。
看到这个jsfiddle了解更多。
实际上，使用以下方法将这种情况与对象偏移进行比较是相当不错的： position: relative – 即使移动对象（ 例如 ），周围的内容也不会改变。
如果你想用JavaScript来处理这个问题，请看看这个问题。
请参阅下面的更新版本。 这上面的部分不再有效，只是不再工作。
这个问题是相当古老的，但目前支持.getBoundingClientRect()对象及其width和height值，结合使用这个简洁的方法和transform ，我认为我的解决scheme也应该提到。
在这里看到它的行动。 （在Chrome 42，FF 33和37中testing）
getBoundingClientRect计算元素的实际框宽度和高度。 很简单，那么我们可以遍历所有元素，并将其最小高度设置为子项的实际高度。
$(".statusColumn").each(function() { var $this = $(this), child = $this.children(":first"); $this.css("minHeight", function() { return child[0].getBoundingClientRect().height; }); });
（通过一些修改，你可以遍历孩子，找出哪一个是最高的，并将父母的高度设置为最高的孩子，但是我决定让这个例子更直接，也可以添加父母的填充如果你想要的话，可以使用高度，或者你可以在CSS box-sizing使用相关的box-sizing值。）
但请注意，我在CSS中添加了一个translate和transform-origin ，使定位更加灵活和准确。
transform: rotate(-90deg) translateX(-100%); transform-origin: top left;
编辑2017年11月14日
正如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>
我知道这是一个旧的职位，但我发现它同时挣扎着完全相同的问题。 对我来说，这个解决scheme是相当简单的“低技术”的方法，只需围绕div旋转90deg与很多
<br>
知道div的近似宽度（这成为旋转之后的高度），我可以通过在div附近添加br来补偿差异，所以上面和下面的内容被相应地推送。
