旋轉文本容器自動高度

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/