html - 文本转换时如何避免Div重叠

Question

我正在尝试将 div 中的文本设计为垂直，但我看到 div 彼此重叠。我怎样才能避免这种情况？顶部 div 的边框也不可见。

<div style="width: 576px;border: 1px solid black;margin: 25px;padding: 25px;text-align: center;height: 393px;transform: rotate(90deg);float:left;clear: left;">
    <br><br><br><br><br><br><br><br>
    <div>
        <h5>TEST</h5></div><br>
    <span>1/2</span>
</div>
<div style="width: 576px;border: 1px solid black;margin: 25px;padding: 25px;text-align: center;height: 393px;transform: rotate(90deg);float:left;clear: left;">
    <br><br><br><br><br><br><br><br>
    <div>
        <h5>TEST</h5></div><br>
    <span>2/2</span>
</div>

Answer 1

它因为旋转而重叠。您的 div 为 576px 宽，393px 高。旋转点默认在中心，因为你的盒子的宽度大于高度，所以它会重叠。如果您希望边距仍显示为 25px，请应用以下边距:

top, bottom: (576 - 393) / 2 + 25 = 116.5
left, right: (393 - 576) / 2 + 25 = -66.5

代码看起来像这样:

margin: 117px -67px;

希望这对您有所帮助!

fiddle :https://jsfiddle.net/yq4ob9ao/1/

#div1, #div2 {
    width: 576px;
    border: 1px solid black;
    margin: 117px -67px;
    padding: 25px;
    text-align: center;
    height: 393px;
    transform: rotate(90deg);
    float:left;
    clear: left;
}

<div id="div1">
    <br><br><br><br><br><br><br><br>
    <div>
        <h5>TEST</h5></div><br>
    <span>1/2</span>
</div>
<div id="div2">
    <br><br><br><br><br><br><br><br>
    <div>
        <h5>TEST</h5></div><br>
    <span>2/2</span>
</div>