CSS中旋转的元素会正确影响其父级的高度 [英] Rotated elements in CSS that affects their parent's height correctly
本文介绍了CSS中旋转的元素会正确影响其父级的高度的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
假设我有几个列,其中一些我想旋转的值:
可以在此处找到此解决方案: 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:
<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.
A write-up of this solution can be found here: http://kizu.ru/en/fun/rotated-text/
这篇关于CSS中旋转的元素会正确影响其父级的高度的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文