如何避免子元素撑高父元素？
在网页布局中，如何控制子元素对父元素高度的影响是一个常见问题。为了使父元素仅由文字内容撑高，而不是被图片等子元素撑高，我们可以考虑以下纯 css 解决方法：
绝对定位： 将图片子元素设置为绝对定位（position: absolute），使其脱离文档流，就不会对父元素的高度产生影响。
例如，修改 css 为：
.parent { border: 1px solid red; height: auto;}.child-image { border: 1px solid black; position: absolute;}.child-text { border: 1px solid black;}
背景图： 如果子元素是图片，可以考虑将其设置为父元素的背景图（background-image）。虽然部分图片内容可能会被裁切，但可以利用其他 css 属性进行调整。但是，对于此效果图所示情况，背景图可能不适用。
建议使用第一种绝对定位的方法，它更加直接简单。
以上就是如何避免子元素撑高父元素？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1632211.html
微信扫一扫 
支付宝扫一扫 
