旋转文本容器自动高度

Question

我在容器中有一些90度旋转的跨度，我想将容器的高度设置为最高旋转元素的高度。

第一步是让heighest元素的高度：

var $max_width = Math.max.apply(Math, $('.tbl-value').map(function(){ 
    return $(this).width(); 
}).get()); 

来源：jQuery get max width of child div's

此解决方案看起来对我来说正确的，但似乎不以某种方式工作。下一步是将父容器的高度设置为$max_width的大小。

这里有小提琴我的代码：http://jsfiddle.net/m4z5701p/

我怎么能设法做到这一点？

Ps .:我知道我的JS代码很混乱，对不起。

Answer 1

.rotated-text { 
 
    display: inline-block; 
 
    overflow: hidden; 
 

 
    width: 1.5em; 
 
    line-height: 1.5; 
 
} 
 
.rotated-text__inner { 
 
    display: inline-block; 
 
    white-space: nowrap; 
 

 
    transform: translate(0,100%) rotate(-90deg); 
 
    transform-origin: 0 0; 
 
} 
 
.rotated-text__inner:after { 
 
    content: ""; 
 
    float: left; 
 
    margin-top: 100%; 
 
}

<span class="rotated-text"> 
 
    <span class="rotated-text__inner"> 
 
     Rotated foo 
 
    </span> 
 
</span>

的旋转解决方案的最好的文章试试这个我可以对你的作品 http://kizu.ru/en/fun/rotated-text/