flow:lef и transform:rotate Возможно ли нормально упаковать div

339

24 декабря 2016, 15:21

Можно ли притянуть серый блок к развёрнутому тексту? Можно притянуть через сдвиг по relative, но тогда сдвигаются за пределы окна перемещённые на новую строку.

#specSZ { 
  position:relative; 
  top:75px; 
  left:-70px; 
  transform: rotate(-90deg); 
  float:left; 
  width:190px; 
} 
.specBox { 
  left:-100px; 
  width:190px; 
  height:190px; 
  background-color:silver; 
  float:left; 
}

<!DOCTYPE html> 
 
<body> 
<div id="specSZ">ТЕКСТ</div> 
<div class="specBox"> 
  <span>ТЕКСТ</span> 
</div> 
<div class="specBox"> 
  <span>ТЕКСТ</span> 
</div> 
<div class="specBox"> 
  <span>ТЕКСТ</span> 
</div> 
 
</body> 
</html>

Answer 1

так?

#specSZ { 
  position:relative; 
  top:75px; 
  
  transform: rotate(-90deg); 
  float:left; 
 
} 
.specBox { 
  left:-100px; 
  width:190px; 
  height:190px; 
  background-color:silver; 
  float:left; 
}

<!DOCTYPE html> 
 
<body> 
<div id="specSZ">ТЕКСТ</div> 
<div class="specBox"> 
  <span>ТЕКСТ</span> 
</div> 
<div class="specBox"> 
  <span>ТЕКСТ</span> 
</div> 
<div class="specBox"> 
  <span>ТЕКСТ</span> 
</div> 
 
</body> 
</html>

Answer 2

#overRotateDiv { 
  width:65px; 
  height:190px; 
  margin:0em; 
  padding:0em; 
  float:left; 
} 
 
 
#specSZ { 
  position:relative; 
  top:75px; 
  
  transform: rotate(-90deg); 
  float:left; 
 
} 
.specBox { 
  left:-100px; 
  width:190px; 
  height:190px; 
  background-color:silver; 
  float:left; 
}

<!DOCTYPE html> 
 
<body> 
 <div id="overRotateDiv">  
    <div id="specSZ">ТЕКСТ</div> 
 </div>  
 
<div class="specBox"> 
  <span>ТЕКСТ</span> 
</div> 
<div class="specBox"> 
  <span>ТЕКСТ</span> 
</div> 
<div class="specBox"> 
  <span>ТЕКСТ</span> 
</div> 
 
</body> 
</html>