如何实现图片旁文本对齐展示 避免长文本换行落入图片下方区域

问题原因 #

你之前使用的vertical-align: top仅能实现同行行内元素的顶部对齐，当文本长度超出单行宽度时，超出内容会自动折行到图片下方，这是行内元素的默认排版逻辑。

解决方案 #

用Flex布局实现固定图文并排效果，所有文本只会在图片右侧的独立区域内折行，不会落到图片下方，不需要修改原有HTML结构，仅需要补充CSS规则即可：

1. 新增main标签的样式规则：

main {
  display: flex;
  align-items: flex-start; /* 实现图片和文本顶部对齐 */
  gap: 15px; /* 控制图片和文本的横向间距，可按需调整数值 */
}

2. 可选优化：如果需要限制图片尺寸避免页面变形，可以给img补充宽高限制：

img {
  vertical-align: top;
  max-width: 220px; /* 图片最大宽度可自行调整 */
  height: auto;
}

修改完成后刷新页面即可生效，就算文本长度超过图片高度，也不会落到图片下方排版。

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