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

发布日期： 2024-11-08 阅读量： 作者： 网络

如何让

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

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

解决方法

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

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

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

随便看看