前端 - 如何使一个元素不撑高父元素？

Question

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

jsfiddle

Answer 1

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

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

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

Answer 2

你可以使用 CSS 的 flex 属性来实现这个需求。flex 布局是一种灵活的布局方式，允许你轻松地控制元素的对齐方式、方向和大小。

你可以将父元素设置为 flex 容器，并使用 flex-grow 属性来控制子元素的扩展。如果你希望图片跟随文字内容的高度，可以将 flex-grow 设置为 0，这样图片就不会扩展父元素的高度。

以下是一个示例代码：

.parent {  display: flex;  flex-direction: column;}.child {  flex-grow: 0;}

在这个示例中，.parent 是父元素，.child 是子元素。通过将 flex-grow 设置为 0，子元素不会扩展父元素的高度。这样，父元素的高度就只会被文字内容撑开。