CSS实现图文并排时文本过长重叠、短文本间距过大问题求助

问题根源 #

• 你给左侧图片容器设置了position: absolute，该属性会让元素脱离正常文档流，后续的文本容器不会感知到它的存在、也不会为它预留位置，因此文本长度溢出时就会覆盖在图片上方
• 右侧文本容器设置了float: right，会让整个文本块强制对齐父容器的最右侧，自然会和左侧图片之间产生大片空白，无法实现紧贴效果

推荐方案（Flex布局实现，兼容性好、写法简单） #

直接替换你原有的CSS代码为以下内容即可：

/* 父容器开启flex布局，直接实现子元素并排 */
.main_product {
  display: flex;
  gap: 20px; /* 控制图片和文本之间的间距，可自行调整数值 */
  align-items: flex-start; /* 让图片和文本顶部对齐，需要垂直居中可以改成center */
}

.main_product-img {
  height: 400px;
  width: 400px;
  background-size: contain;
  background-repeat: no-repeat; /* 避免背景图重复 */
  background-position: center; /* 背景图居中显示 */
}

.text-left {
  text-align: left;
  flex: 1; /* 让文本容器占满剩余宽度，避免内容过少时宽度收缩 */
}

效果说明 #

• 左侧图片和右侧文本会自然并排，不会出现重叠问题
• 图片和文本的间距由gap属性精准控制，可根据需求调整数值
• 文本容器会自动占满图片之外的剩余宽度，不管内容长短都不会出现大片空白

内容的提问来源于stack exchange，提问作者nguyencuc2286