html - 如何使父母身高与孩子相关,但当孩子身高增加时也不增加父母身高
问题描述
正如标题所描述的,我有一个包含子 div 的父 div。
我不知道会有多少孩子,所以我不能给父母一个固定的高度。
悬停时子 div 的高度会增加。
我怎样才能让父母的身高与孩子的身高相关,但当他们的身高增加时也不会增加?
正如您在代码中看到的那样,“parent2”具有所需的功能,但它的高度是固定的,我无法使用。
PS 不使用 javascript
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;
}
解决方案
父母的身高是固定的吗?您可以为父或子 div 添加最大高度吗?作为100 天 CSS 挑战的一部分,我做了类似的事情。这是我的codepen的链接
每个子 div 都有一个宽度高度。
&:hover {
font-size: 25px;
padding: 70px;
transition: 0.8s;
text-transform: uppercase;
}
在悬停时,我本质上是通过添加填充而不是增加高度来增加宽度(或者在你的情况下,这将是高度)。
父容器的宽度为 400px,并设置为显示 flex(以容纳可变的子 div)
display: flex;
flex-direction: row;
width: 400px;
推荐阅读
- c# - 在基于 Swagger 和 ReDoc 的 OpenAPI 文档中包含枚举的 XML 注释
- javascript - 编码新手,更新网站故障版权年份的代码?
- java - 如何(取消)编组子类中根元素的值
- android - TextView 的 style.xml 中的文本对齐值
- microphone - 应用程序在 MacOS 10.14 Mojave 中未请求访问麦克风的权限
- slack - 我可以为传入的 webhook 使用自定义 JSON 格式吗
- java - 需要 Java 代码/逻辑来提取 COMP。EBCDIC 文件中的字段
- node.js - 控制器的节点休息 API 问题
- javascript - 使用 map 时,汇总返回未定义或带值的数组
- reactjs - 在 React 中使用组合将组件拆分为基类和子类