Bir öğeyi düzenin "akışını" kesmeden nasıl css ile döndürebilirim?

Question

Soldaki üst kutu: Bu orjinal tablodur.

Orta kutusu:

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

kırmızı elemana: Ben uyguladığınızda olacağı da bu.

Alt Sağ kutu: Nihayetinde orta kutunun nasıl görünmesini istediğimi budur. Gördüğünüz gibi, kırmızı elemanı içeren tablo, herhangi bir taşma yapmadan üst sol elemanında () tam olarak içererek uygun şekilde davranır.

Üçüncü kutu gibi davranmasını sağlamak için orta kutuya başvurmam gerekenler nelerdir?

Eğer .red başlangıç ​​genişliğini ve yüksekliğini ayarlarken yana

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); 
} 

Answer 1

, sadece takas olabilir: Açıkçası

Ben

<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 bir noktası göstermek için çok basitleştirilmiş bir örnek kullanıyorum bu özellikler dönüyor.

bu değiştir: Bununla

.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