如何让“元素跟随文本高度，而不是撑高父容器？

如何让“元素跟随文本高度，而不是撑高父容器？插图

如何让

元素跟随文本高度，而不是撑高父容器

在页面布局中，经常遇到父容器高度被子元素撑开的问题。在图例所示的案例中，父容器被较高的图片撑开，而文本的高度没有被考虑。本问答将提供纯解决方案，让图片跟随文本高度，确保父容器的高度不会被图片影响。

解决方法

为了解决这个问题，需要将图片从文档流中脱离出来，使其不再影响父容器的高度计算。可以采用以下两种纯css方法：

使用position: absolute属性将图片绝对定位在父容器内，脱离文档流：

.image {
  position: absolute;
  top: 0;
  left: 0;
}

登录后复制

将图片设置作为父容器的背景图像，并确保父容器的属性为hidden，以防止图像超出容器范围：

.container {
  background-image: url(image.png);
  background-position: center center;
  background-size: contain;
  overflow: hidden;
}

登录后复制

以上就是如何让“元素跟随文本高度，而不是撑高父容器？的详细内容，更多请关注米云其它相关文章！

近期文章