如何使父div调整大小以包含CSS旋转的子div？

标题说明了一切：“如何让父div调整大小以包含CSS旋转的子div？”如何使父div调整大小以包含CSS旋转的子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方法是什么？ 应根据@ misterManSam的建议我更新的活生生的例子，显示解决方案支持IE9

。 found here

来源

2014-06-09 Ben

旋转时更改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); 
}

来源

2014-06-09 09:30:43 misterManSam

谢谢。现在，我将与您的方向一起实施它作为一个通用的解决方案： parent.style.width =（elm.clientHeight * Math.sin（rad）+ elm.clientWidth * Math.cos（rad））+“px” ; 如果没有更好的解决方案，我会标记你的答案。 http://jsbin.com/viyacaji/17/edit?html,css,js,output – Ben

最终实现：http://jsbin.com/viyacaji/17/edit?html,css,js,output – Ben

在这里你去：http://jsbin.com/viyacaji/11/edit

在JS功能只需旋转的容器，不要动肩股利。因为基本上，你想要达到的效果与旋转父div时相同。

是否有任何疑问？

来源

2014-06-09 09:26:09

这里的问题 - 我想父母的宽度以适应旋转的孩子。使用CSS旋转父项不会改变宽度。 – Ben

如何使父div调整大小以包含CSS旋转的子div？

回答

相关问题