html - HTML/CSS 根据子内容自动调整父 div 的高度/宽度
问题描述
我想做这个: 堆叠卡片
html 看起来像这样:
<div class="container>
<div class="top-card>
<div class="card-content">
...
</div>
</div>
<div class="bottom-card>
</div>
</div>
我在设置样式时遇到了问题,因此整个卡片的高度会根据顶部卡片内的内容自动调整。先感谢您。
解决方案
你可以使用 box-shadow 的组合display: inline-block
来完成你想要做的事情。我已经更新了答案。这是代码:
.grandparent {
display: inline-block;
position: relative;
}
.parent {
display: inline-block;
background: blue;
position: absolute;
top: 0;
left: 0;
}
.child {
width: 100px;
height: 100px;
background: red;
margin: 5px;
}
.shadow {
margin-left: -7px;
margin-top: -7px;
background: pink;
z-index: -100;
border: 1px solid green;
}
.empty {
opacity: 0;
}
<div class="grandparent">
<div class="parent">
<div class="child"></div>
</div>
<div class="parent shadow">
<div class="child empty"></div>
</div>
</div>
推荐阅读
- ansible - 具有独特参数的 Cisco 路由器配置的 Ansible Playbook
- automated-tests - 空手道测试 - 以无头模式从电子邮件访问 PDF 链接的问题(从 Jenkins 运行)
- yaml - Swagger 编辑器中的 YAML 枚举解析器问题
- python - 如何在 mongo DB 上插入数据
- spring-boot - 使用 Spring Boot 测试 REST 控制器的 Spock 测试框架
- firebase - 为什么要使用 mqtt 服务器作为 BLE 网关?
- r - 在R中提取后如何删除某些行?
- c# - .net 核心控制台应用 Azure 认知服务 MP3
- vb.net - 标准表达式中的数据类型不匹配但并非总是如此,有时有效,有时不是 vbnet / access
- typescript - 未检查 TypeScript 内联类型