如何在HTML内编写响应式CSS实现图文自适应换行？

要让文字与图片在空间不足时自动换行，只需给外层flex容器添加flex-wrap: wrap属性，同时优化文字区块的宽度设置，让布局适配不同屏幕尺寸：

修改后的完整代码 #

<div style="display:flex; flex-wrap: wrap; max-width:980px; margin:auto; align-items:center; justify-content:center;">
  <div style="padding: 10px; min-width: 280px; flex: 1;">
    <h1 style="font-weight: bold; font-size: 2em; padding-bottom: 25px;">Title</h1>
    <p>paragraph of text.
    
    another paragraph of text</p>
  </div>
  <img style="padding: 10px; width:100px;" src="https://images.squarespace-cdn.com/content/v1/5e10bdc20efb8f0d169f85f9/09943d85-b8c7-4d64-af31-1a27d1b76698/arrow.png" />
</div>

关键调整说明 #

• 添加flex-wrap: wrap到外层容器：这是实现自动换行的核心属性，当容器宽度不足以容纳文字和图片并排时，图片会自动移至文字下方。
• 优化文字区块样式：移除原有的width:30vw，改用flex:1让文字区块尽可能占据可用空间，同时设置min-width:280px保证小屏幕下文字不会过窄，提升可读性。
• 可选调整：如果希望换行后图片与文字顶部对齐，可以将外层容器的align-items:center改为align-items:flex-start。

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