如何在文本轉換時避免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; 

希望這有助於！

小提琴：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>

Answer 2

前transform: rotate屬性轉換的div你的利潤率計算。您需要更新單個div的上邊距以調整其位置。

在FIDDLE中，第一個div使用margin-top: 100px;，第二個div使用margin-top: 160px;作爲示例。