嘿，我之前也踩过这个坑！Mac Pages的可视化排版确实顺手，但GitHub的原生Markdown对复杂图文排版支持有限，不过用内嵌HTML就能轻松搞定你要的效果，而且VS Code的预览也能完美显示。下面给你两种亲测有效的方法：

方法一：Flex布局（精准控制对齐） #

这是最稳妥的方式，能让文字和图片从顶部对齐，还能灵活控制间距，而且文字区域里可以正常用Markdown语法：

<div style="display: flex; align-items: flex-start; gap: 1.5rem;">
  <!-- 图片部分：设置固定宽度，防止被压缩 -->
  <img src="./assets/chat-image.png" alt="对话样式截图" style="width: 320px; flex-shrink: 0; border-radius: 8px;">
  <!-- 文字内容区域 -->
  <div>
    这里放你要写的文字内容，完全支持Markdown语法：
    - 可以加项目列表
    - 也能**加粗重点内容**
    - 甚至插入代码块`git clone <仓库地址>`
    
    多段落也没问题，文字会一直靠在图片右侧，从顶部开始排列，和你在Mac Pages里的效果一致。
  </div>
</div>

关键参数说明： #

• display: flex：开启弹性布局，实现并排
• align-items: flex-start：让文字和图片顶部对齐，而不是垂直居中
• gap: 1.5rem：控制图片和文字之间的间距，可根据需求调整
• flex-shrink: 0：防止图片在窗口变窄时被压缩变形

方法二：浮动布局（文字环绕效果） #

如果你想要文字自然环绕图片（包括右侧和下方），可以用float属性，适合需要大段文字配合图片的场景：

<img src="./assets/chat-image.png" alt="对话样式截图" style="float: left; width: 320px; margin-right: 1.5rem; margin-bottom: 0.8rem; border-radius: 8px;">

这里写你的第一段文字，会自动出现在图片的右侧上方。继续写更多内容的话，文字会顺着图片的边缘往下排列，形成环绕效果。

如果想让后续内容不再环绕图片，只需要在这段文字末尾加上清除浮动的代码：
<br style="clear: both;">

---
<!-- 下面的内容就会正常换行，不受图片浮动影响 -->
这是后续的内容，会在图片下方正常显示。

VS Code预览注意事项 #

• 确保图片路径是正确的相对路径（比如放在仓库的assets文件夹里），VS Code预览才能加载到图片
• 如果预览没立刻显示效果，试试关闭再重新打开预览窗口，或者刷新一下
• 内联CSS样式一定要写对，GitHub和VS Code都支持标准的内联样式

这样设置后，不管是VS Code本地预览还是GitHub线上显示，都能达到你想要的图文并排、文字在图片旁上方的效果啦！

内容的提问来源于stack exchange，提问作者Jean-Luc Godard