Question

在下面，我有两个div，一个div逐渐增大以假定其孩子的身高，而另一个由于css变换而导致父对象的身高无法调整。有谁知道为什么第二个div的高度不能调整，以及是否有解决此问题的方法而不涉及使用javascript更改父级的高度？

.container {
  background-color: blue;
  position: relative;
  margin-bottom: 200px;
}

.child {
  background-color: red;
  width:500px;
  height:100px;
  position: relative;
  left: 30%;
}

.b > .child {
  transform:  rotate(-90deg);
}

Container's height grows to fit child element:
<div class="container a">
  <div class="child"></div>
</div>

Container's height does not adjust to fit rotated element:
<div class="container b">
  <div class="child"></div>
</div>

Answer 1

您使用了旋转子元素进行了更改。而且高度和宽度的行为会有所不同。您可以尝试这段代码，也许会有所帮助。

.b > .child {  transform:  rotate(-90deg);   width: 100px; }

包含元素不适合旋转的子元素

1 个答案: