如何避免子元素撑高父元素？

如何避免子元素撑高父元素？

在网页布局中，如何控制子元素对父元素高度的影响是一个常见问题。为了使父元素仅由文字内容撑高，而不是被图片等子元素撑高，我们可以考虑以下纯 css 解决方法：

1. 绝对定位： 将图片子元素设置为绝对定位（position: absolute），使其脱离文档流，就不会对父元素的高度产生影响。

例如，修改 css 为：

.parent {
  border: 1px solid red;
  height: auto;
}

.child-image {
  border: 1px solid black;
  position: absolute;
}

.child-text {
  border: 1px solid black;
}

登录后复制

2. 背景图： 如果子元素是图片，可以考虑将其设置为父元素的背景图（background-image）。虽然部分图片内容可能会被裁切，但可以利用其他 css 属性进行调整。但是，对于此效果图所示情况，背景图可能不适用。

建议使用第一种绝对定位的方法，它更加直接简单。

以上就是如何避免子元素撑高父元素？的详细内容，更多请关注抖狐科技其它相关文章！