Question

标题说明了一切：“如何使父div调整大小以包含CSS-Rotated子div？”

这是我目前得到的： enter image description here

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

Live Example

那么，无论如何要让父母与孩子一起调整大小？仅CSS解决方案是最好的。如果这是不可能的，那么最好的javascript方式是什么？ 应该支持IE9

基于@ misterManSam的建议我更新实例以显示解决方案。 found here

enter image description here

Answer 1

旋转时更改div.container的宽度。在CSS中为#rotator.deg90添加负边距和左边距。

Look at this example :)

的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时相同。

有任何疑问吗？

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

2 个答案: