标签导航：

图文混排中，如何让父元素仅被文字撑开，而不被图片撑开？

图文混排中如何控制父元素的高度？

现有父容器（红色边框）包含两个子元素（黑色边框），如图所示，其中图片的高度较文字高。如何让父元素仅被文字撑开，而不被图片撑开？

解决方案：

  • 绝对定位（absolute）：将图片子元素设置为绝对定位，使其脱离文档流，不再参与父元素高度的计算。

    .image {
  position: absolute;
  left: 0;  /* 水平定位 */
  top: 0;   /* 垂直定位 */
}

  • 背景图（仅图片元素）：将图片设置为父元素的背景图，但需要注意可能被裁切。

    .container {
  background-image: url("./image.jpg");
  background-size: contain;  /* 限制背景图大小 */
}

简单来说，使用绝对定位的方法更直接方便。