如何完全控制 <div> 旋转答案

【问题标题】：How can I fully control a <div> rotation如何完全控制 <div> 旋转
【发布时间】：2019-04-21 23:20:42
【问题描述】：

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

我已经为此苦苦挣扎了一段时间，但似乎没有任何工作正常。我将它用于需要尽可能简洁的文档，并且每次我需要在表格单元格内旋转一个 div 时，该单元格的宽度变得无法控制，与里面写的单词的长度相关。

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

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

我的 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>

【问题讨论】：

标签： javascript html css html-table center

【解决方案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>

【讨论】：

Prego，buona fortuna！

【解决方案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>

【讨论】：

您能否为您的解决方案添加一些解释？需要哪些步骤？