Question

如何根据旋转div的大小调整宽度 - 目前它的尺寸过大，好像它的内容没有旋转一样。

<!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>

Answer 1

我不认为你可以不使用Javascript来做到这一点。这是使用JQuery的简单示例：

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

http://jsfiddle.net/cR6DF/

CSS3旋转和自动宽度

1 个答案: