如何使一个元素不撑高父元素?

作者站长头像
站长
· 阅读数 5

如何使一个元素不撑高父元素?

如图,我有一个父容器(红色边框)和两个子元素(黑色边框)。我希望父容器被文字内容撑开,而不是被图片。现在父元素会被两个子元素中更高的那个撑开,如果图片比较高的话就会像图中所示。如何让图片跟随文字内容的高度,有没有纯 css 的解决方法。

jsfiddle

回复
1个回答
avatar
test
2024-06-25

无论是图片还是文字,都是元素,既然是元素,只要没脱离了父元素,并且不是背景,同时父元素的高度没有一个固定值的话,那么父元素将会被最大高度的子元素撑开。所以,如果你想要父元素不被某一个子元素撑开高度,那么可以考虑下面几个点:

  • 把不想要撑开父元素的那个子元素通过 absolute 绝对定位方式,脱离文档流;
  • 如果子元素是图片的话,可以考虑使用背景图的方式(有可能被裁切,但也有办法处理,但按照这个效果图的情况来看,背景图应该不合适);

所以,简单来说,使用定位的方式应该是比较简单直接的。

回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引,对解决问题有帮助
  • 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容