Question

如何使用CSS完全控制div的旋转？

我已经为此苦苦挣扎了一段时间，但似乎没有任何正常工作。我将其用于需要尽可能简洁的文档中，并且每当我需要在表格单元格中旋转div时，该单元格的宽度就变得不可控制，与写入其中的单词的长度有关。 / p>

即使我一直在尝试使用其他方法，现在我仍在使用下面的代码。

我的目的是减小左侧单元格的宽度，使其更适合字体，从而释放空间。

Screenshot

我的CSS：

.rotate {
    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    writing-mode: lr-tb;
}

还有我的HTML：

<table class="TABELLA1" width="400px" align="left">
    <tr height="90px">
        <td width="1%">
            <p id="idcliente" class="A8BL rotate">C</p>
        </td>
        <td width="99%">
            <div>
                <div class="A8BL">
                    FACTORY 1<br>
                    253190 MILANO (IT)<br>
                </div>
                <div class="A8L">
                    Tel. 02 669172284<br>
                    e-mail: info@alufaoj.it
                    Cod. Fisc. <br>
                    e Partita IVA 2251364245341126
                </div>
            </div>
        </td>
    </tr>
</table>

Answer 1

您看到的是布局引擎在应用转换之前计算元素的宽度。解决此问题的一种简单方法是添加负的水平边距：

.rotate {
    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    writing-mode: lr-tb;
    margin: 0 -1.5em;
}

<table class="TABELLA1" width="400px" align="left">
    <tr height="90px">
        <td width="1%">
            <p id="idcliente" class="A8BL rotate">CLIENTE</p>
        </td>
        <td width="99%">
            <div>
                <div class="A8BL">
                    FACTORY 1<br>
                    253190 MILANO (IT)<br>
                </div>
                <div class="A8L">
                    Tel. 02 669172284<br>
                    e-mail: info@alufaoj.it
                    Cod. Fisc. <br>
                    e Partita IVA 2251364245341126
                </div>
            </div>
        </td>
    </tr>
</table>

Answer 2

宽度为1％的表格数据有一段我们可以旋转的段落，但是当字符过多或更少时，您必须手动调整中心类的边距和填充。

.rotate {
    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    transform: rotate(270deg);
    margin: 0 -1.6em;
}

<table class="TABELLA1" width="400px" align="left">
    <tr height="90px">
        <td width="1%">
            <p id="idcliente" class="A8BL rotate">CLIENTE</p>
        </td>
        <td width="99%">
            <div>
                <div class="A8BL">
                    FACTORY 1<br>
                    253190 MILANO (IT)<br>
                </div>
                <div class="A8L">
                    Tel. 02 669172284<br>
                    e-mail: info@alufaoj.it
                    Cod. Fisc. <br>
                    e Partita IVA 2251364245341126
                </div>
            </div>
        </td>
    </tr>
</table>

如何完全控制<div>旋转

2 个答案: