Typora中将多张图片并排/分行显示

最新推荐文章于 2025-05-14 12:18:52 发布

原创最新推荐文章于 2025-05-14 12:18:52 发布 · 2.4k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#开发语言

Typora 专栏收录该内容

1 篇文章

订阅专栏

这篇博客介绍了如何使用HTML代码实现居中并排和左对齐的图片布局，并展示了修改图片大小的方法。内容包括`center`和`figure`标签的用法，以及通过调整`width`属性改变图片尺寸。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

居中并排

<center class="half">
    <img src="https://tva1.sinaimg.cn/large/007S8ZIlgy1ggnfolw5kxj30u00u0qe5.jpg" width="300"/>
    <img src="https://tva1.sinaimg.cn/large/007S8ZIlgy1ggnfolw5kxj30u00u0qe5.jpg" width="300"/>
</center>

左对齐并排

<figure class="third">
    <img src="https://tva1.sinaimg.cn/large/007S8ZIlgy1ggnfolw5kxj30u00u0qe5.jpg" width="200"/>
    <img src="https://tva1.sinaimg.cn/large/007S8ZIlgy1ggnfolw5kxj30u00u0qe5.jpg" width="200"/>
    <img src="https://tva1.sinaimg.cn/large/007S8ZIlgy1ggnfolw5kxj30u00u0qe5.jpg" width="200"/>
</figure>

<center class="half">
<img src="E:\2020\....jpg" width = "50%" alt="***" align=left />
<img src="E:\2020\... .jpg" width = "50%"  alt="***" align=right />
<center>

修改图片大小