标题说明了一切:“如何使父 div 调整大小以包含 CSS 旋转的子 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);
}
那么,有没有办法让 parent 随 child 调整大小? 仅 CSS 的解决方案将是最好的。如果那是不可能的,那么最好的 javascript 方法是什么? 应该支持IE9
根据@misterManSam 的建议 我更新了实例以展示解决方案。 found here
最佳答案
旋转时更改 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);
}
关于javascript - 如何使父 div 调整大小以包含 CSS-Rotated 子 div?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24116856/