如何用css旋轉元素而不破壞佈局的「流動」？

enter image description here 如何用css旋轉元素而不破壞佈局的「流動」？

左上框：這是原表。

中東盒：這是發生在我申請：

.rotate { 
    -webkit-transform: rotate(270deg); 
    -moz-transform: rotate(270deg); 
    -o-transform: rotate(270deg); 
    -ms-transform: rotate(270deg); 
    transform: rotate(270deg); 
}

的紅色元素。

底部右框：這是我最終想要的中間框看起來像。正如你所看到的，包含紅色元素的表格通過在左上角的元素中完全包含後者來正確處理後者，而沒有任何溢出。

我需要如何應用中間盒才能使其表現得像第三個一樣？

很顯然，我現在用一個很簡單的例子來說明一個觀點

<div> 
<table id='one'> 
    <tr> 
     <td> 
      <div class='red'></div> 
     </td> 
     <td> 
     </td> 
    </tr> 
    <tr> 
     <td><div class="blue"></div></td> 
     <td><div class="blue"></div></td> 
    </tr> 
</table> 
</div> 

<div> 
<table id='two'> 
    <tr> 
     <td> 
      <div class='red rotate'></div> 
     </td> 
     <td> 
     </td> 
    </tr> 
    <tr> 
     <td><div class="blue"></div></td> 
     <td><div class="blue"></div></td> 
    </tr> 
</table> 
</div> 

<div> 
<table id='three'> 
    <tr> 
     <td> 
      <div class='red'></div> 
     </td> 
     <td> 
     </td> 
    </tr> 
    <tr> 
     <td><div class="blue"></div></td> 
     <td><div class="blue"></div></td> 
    </tr> 
</table> 
</div>

CSS：

table, th, td { 
    border: 1px solid black; 
} 

#two { 
    margin-top:20px; 
    margin-left:350px; 
} 

#three { 
    margin-top:20px; 
    margin-left:700px; 
} 

.red { 
    width: 150px; 
    height: 50px; 
    background-color:red; 
} 

#three .red { 
    width: 50px; 
    height: 150px; 
    background-color:red; 
} 

.blue { 
    width: 100px; 
    height:100px; 
    background-color: blue; 
} 

.rotate { 
    -webkit-transform: rotate(270deg); 
    -moz-transform: rotate(270deg); 
    -o-transform: rotate(270deg); 
    -ms-transform: rotate(270deg); 
    transform: rotate(270deg); 
}

來源

2014-05-08 disappearedng

***適用於中間的方框，使其行爲類似於第三***你是什麼意思這樣？你的意思是'盒子'是'桌子'嗎？如果是這樣，第三張桌子和中間桌子不一樣，我不明白你在這裏想要什麼。 –

@KingKing澄清。 – disappearedng

@KingKing：OP想要使用CSS旋轉紅色區域，並強制父級擴展其高度（以適應旋轉寬度）。 –

既然你設置的.red初始寬度和高度，你可以簡單的交換這些屬性在旋轉。

替換此：

.rotate { 
    -webkit-transform: rotate(270deg); 
    -moz-transform: rotate(270deg); 
    -o-transform: rotate(270deg); 
    -ms-transform: rotate(270deg); 
    transform: rotate(270deg); 
}

有了這個：

.rotate { 
    width: 50px; 
    height: 150px; 
}

Demo

來源

2017-10-17 17:02:21 AJilityJ

如何用css旋轉元素而不破壞佈局的「流動」？

回答

相關問題