如何在Jupyter中通过纯Markdown实现两张图片并排显示?
用纯Jupyter Markdown实现图片并排(跨语言环境通用)
当然可以!你完全不需要依赖Python或者拆分单元格插代码,只用Jupyter支持的Markdown内嵌HTML就能实现两张图片并排,而且这个方法在非Python的Notebook(比如R、Julia Notebook)里也能正常工作。
这里有两种简单可靠的方案:
方案1:使用Flex布局(推荐)
通过HTML的div结合flex布局,能轻松控制图片的排列和间距:
<div style="display: flex; justify-content: space-around; gap: 15px;"> <img src="path/to/image1" alt="第一张图片" style="width: 45%;"> <img src="path/to/image2" alt="第二张图片" style="width: 45%;"> </div>
display: flex让容器内的元素横向排列gap控制两张图片之间的间距width可以调整每张图片的占比,比如改成50%就是各占一半宽度
方案2:使用HTML表格(兼容性更强)
如果遇到对flex支持不好的旧环境,用表格是更稳妥的选择:
<table> <tr> <td style="padding: 0 10px;"><img src="path/to/image1" alt="第一张图片" style="width: 100%;"></td> <td style="padding: 0 10px;"><img src="path/to/image2" alt="第二张图片" style="width: 100%;"></td> </tr> </table>
- 表格的两个单元格分别放一张图片,设置
width: 100%让图片填满单元格 padding用来控制单元格之间的间距
这两种方法都只需要在同一个Markdown单元格里写入代码,完全和编程语言无关,满足你想要的跨环境需求。
内容的提问来源于stack exchange,提问作者rodrigolece
相关产品推荐
相关产品推荐

