Question

我正在寻找一种只在CSS中调整容器<div>标签高度的方法，只要其中一个子项被旋转。我非常清楚（并且可以完全实现）使用JavaScript的解决方案，但我希望找到一个CSS解决方案。

这个小提琴显示了我的困惑：http://jsfiddle.net/spryno724/yX56u/

HTML：

<div class="container">
    <p>Test</p>
    <img class="rotate" src="https://tse1.mm.bing.net/th?id=HN.608054218431465781&pid=1.7" />
</div>

CSS：

.container {
    border: 1px solid red;
    overflow: auto;
    position: relative;
    width: 100%;
}

.rotate {
    -moz-transform: rotateZ(45deg);
    -ms-transform: rotateZ(45deg);
    -o-transform: rotateZ(45deg);
    -webkit-transform: rotateZ(45deg);
    transform: rotateZ(45deg);

    position: absolute;
    top: 160px;
}

是否有人知道如何让容器自动调整其高度，而不管旋转对象的自然高度或旋转量如何？

Answer 1

我个人认为不能用纯粹的CSS来完成。要计算容器的高度，您需要执行以下操作：

   heightContainer = sin(angleImg) * (widthImg + heightImg)

这是纯粹的css无法做到的事情。您可以在css中使用Javascript，或使用Less之类的东西来生成代码。但是把js放在你的CSS中是非常糟糕的（那就是你有js文件的东西）。而Less解决方案需要角度和尺寸的设定值，如果这些是固定的，你也可以设置容器高度固定......

除了计算高度之外，我没有看到任何可行的解决方案。再次制作img relative会有所帮助，因为转换不会被考虑在内。我尝试使用this related question的答案（这很聪明），但我认为它不适用于你的案例。

所以imo：不，它不能用纯粹的CSS来完成但我希望看到有人证明我错了！

仅限CSS - 旋转和调整容器高度

1 个答案: