如何使父div調整大小以包含CSS-Rotated子div？

Question

標題說明了一切：“如何使父div調整大小以包含CSS-Rotated子div？”

這就是我目前得到的：

HTML：

<div id="container">
    <div id="rotator">
        <h1>TEXT</h1>
    </div>
</div>

CSS：

#container {
  display: inline-block;
  border: 1px solid gray;
  padding: 10px;
  overflow: hidden;
}

#rotator {
  display: inline-block;
  width: 200px;
  height: 500px;
  background-color: rgb(130, 310, 130);
  border: 1px solid blue;
  text-align: center;
  line-height: 500px;

  -moz-transform:rotate(90deg);
  -webkit-transform: rotate(90deg);
  -o-transform:rotate(90deg);
  -ms-transform:rotate(90deg);
  transform:rotate(90deg);
}

實例

那么，無論如何要讓父母與孩子一起調整大小？ 僅CSS解決方案是最好的。 如果這是不可能的，那么最好的javascript方式是什么？ 應該支持IE9

根據@ misterManSam的建議，我更新了實例以顯示解決方案。 在這里找到

Answer 1

旋轉時更改div.container的寬度。 在CSS中為#rotator.deg90添加負邊距和左邊距。

看看這個例子:)

使用Javascript

function to90() {
   var elm = document.getElementById("rotator");
   console.log(elm);
   elm.className = "deg90";

//add these lines
   document.getElementById('container').style.width = "500px";
   document.getElementById('container').style.height = "200px";
}

CSS

#rotator.deg90 {
  /*add this*/
  margin-top: -150px;
  margin-left: 200px;

 -moz-transform:rotate(90deg);
 -webkit-transform: rotate(90deg);
 -o-transform:rotate(90deg);
 -ms-transform:rotate(90deg);
 transform:rotate(90deg);
}

Answer 2

你去了： http ： //jsbin.com/viyacaji/11/edit

只需旋轉jS功能中的容器，不要移動旋轉器div。 因為基本上，你想要實現的是與旋轉父div時相同。

有疑問嗎？