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

积累知识，胜过积蓄金银！毕竟在文章开发的过程中，会遇到各种各样的问题，往往都是一些细节知识点还没有掌握好而导致的，因此基础知识点的积累是很重要的。下面本文《如何让``元素跟随文本高度，而不是撑高父容器？》，就带大家讲解一下知识点，若是你对本文感兴趣，或者是想搞懂其中某个知识点，就请你继续往下看吧~

如何让

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

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

解决方法

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

• 绝对定位

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

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

• 背景图

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

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

终于介绍完啦！小伙伴们，这篇关于《如何让``元素跟随文本高度，而不是撑高父容器？》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！