CSS3 Поворот и автоматическая ширина

Как сделать, чтобы отрегулировать его ширину на размер повернутого div - в настоящее время он становится негабаритным, как если бы его содержимое не было повернуто.CSS3 Поворот и автоматическая ширина

<!DOCTYPE html> 
<html> 
<head> 
    <title></title> 
    <style> 
     .rotate270 
     { 
      -webkit-transform: rotate(270deg); 
      -moz-transform: rotate(270deg); 
      -o-transform: rotate(270deg); 
      -ms-transform: rotate(270deg); 
      transform: rotate(270deg); 
     } 
    </style> 
</head> 
<body> 
    <table> 
     <tr> 
      <td rowspan="2" class="standard-padding" style="background-color: #ccc;"> 
       <div class="rotate270" style="background-color: gray; color: white; padding: 5px; font-size: 10px; font-weight: bold;">Test 123</div></td> 
      <td rowspan="2"></td> 
      <td style="font-size: 10px; font-weight: bold;"></td> 
     </tr> 
     <tr>    
      <td style="font-size: 10px;"></td> 
     </tr> 
    </table> 
</body> 
</html>

источник

2013-07-14 user1514042

Я не думаю, что вы можете сделать это без использования Javascript. Вот краткий пример использования JQuery:

$('#cell').css('width', $('#cell .rotate270').height());

http://jsfiddle.net/cR6DF/

источник

2013-07-14 23:18:17 SharkofMirkwood

Я думаю, что вы пропускаете пункт - ширина контейнера ничего не меняет. Просто сделайте текст в два раза дольше, чем он, и установите ширину контейнера на 40 пикселей, что должно быть достаточно - это не сработает! – user1514042

CSS3 Поворот и автоматическая ширина

ответ

Смежные вопросы