Question

正如标题所述，我有一个包含子div的父div。

我不知道会有多少个孩子，所以我不能给父母一个固定的身高。

悬停时，儿童div的高度会增加。

我该如何使父母的身高与其孩子相关，但又不随着他们的身高增加而增加？

正如您在代码“ parent2”中看到的那样，它具有所需的功能，但它的高度是固定的，我无法使用。

不使用javascript的PS

HTML

<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
</div>
<div class="parent2">
  <div class="child"></div>
  <div class="child"></div>
</div>

CSS

.parent,
.parent2{
  display: inline-block;
  width: 200px;
  overflow: hidden;
}

.parent {
  height: auto;
  background-color: green;
  vertical-align: top;
}

.parent2 {
  height: 300px;
  background-color: steelblue;
  margin-left: 50px;
}

.child {
  height: 100px;
  width: 100px;
  background-color: orange;
  margin: 10px auto 10px auto;
  transition: height 0.5s ease;
}

.child:hover {
  height: 150px;
}

我的小提琴：https://jsfiddle.net/zuswrt23/

Answer 1

父母的身高是否固定？您可以为父级或子级div添加最大高度吗？我在100 days CSS challenge.中做了类似的操作，这是指向我的codepen

的链接

每个子div的宽度都为高度。

  &:hover {
  font-size: 25px; 
  padding: 70px;
  transition: 0.8s;
    text-transform: uppercase;
}

在悬停时，我实质上是通过添加填充而不是增加高度来增加宽度（或者，在您的情况下，是高度）。

父容器的宽度为400px，并设置为显示flex（以容纳可变的子div）

display: flex;
flex-direction: row;
width: 400px;

如何使父母的身高与孩子相关，但又不要在孩子的身高增加时增加父母的身高

1 个答案: