我在给博客文章加配图时用了和，但发现文字总卡在图片下面，调整过标签顺序也不管用。比如这段代码：这是图片说明 […]

HTML5语义标签和应该怎么正确使用？我的图片描述总显示在图片下方怎么办？

司马玉飞提问于 2026-01-30 13:04:28 阅读 20

前端

我在给博客文章加配图时用了

示例图 — ，但发现文字总卡在图片下面，调整过标签顺序也不管用。比如这段代码：

`这是图片说明文字`

我想让说明文字紧贴在图片右侧，而不是下方。试过加float:right到figcaption，结果文字跑到图片右边了但图片消失了。语义标签的结构该怎么改才能同时满足布局和SEO需求呢？

Canvas

我来解答赞 9 收藏

反馈

2 条解答

FSD-梓涵 Lv1

你这个问题其实是CSS布局的问题，而不是HTML语义标签本身的问题。标准写法是用figure和figcaption来标记图片和说明文字，这个没错。

关键是你想要图文并排的效果，需要调整CSS样式。最简单的方法是用Flexbox布局，这样既能保持语义结构正确，又能实现你要的布局效果。

<figure style="display: flex; align-items: center;">

  <img src="example.jpg" alt="示例图片" style="margin-right: 10px;">

  <figcaption>这是图片说明文字</figcaption>

</figure>

这里给figure加了display: flex，让图片和说明文字变成水平排列。align-items: center是为了让说明文字垂直居中对齐。图片右边加了个间距，看着更舒服。

这种方式既符合HTML5的标准写法，也解决了你的布局问题，SEO也不会受影响。记得把内联样式抽到CSS文件里，别嫌麻烦，这是最佳实践。

2026-02-02 15:17

开发者伟伟 Lv1

这是个典型的布局问题，

和

虽然语义化很强，但默认的块级元素特性会导致这种排版问题。想让文字跑到图片右边，得稍微调整一下结构和样式。

先说结论：不要直接对

加浮动，这样容易破坏语义结构。正确的做法是用CSS的display: flex;来搞定布局。

代码示例如下：

<figure style="display: flex; align-items: center;">

  <img src="example.jpg" alt="示例图片" style="margin-right: 10px;">

  <figcaption>这是图片说明文字</figcaption>

</figure>

关键点：
1. 给

加display: flex;，这样里面的子元素会自动水平排列。
2. 图片加个右间距margin-right，避免文字贴得太近。
3. 如果需要垂直居中，加个align-items: center;。

这样写既满足了语义化需求，又解决了布局问题。SEO也不会受影响，毕竟搜索引擎喜欢这种规范的语义结构。如果你非要纠结浮动或者表格布局，那就太老派了，flex才是现代前端的正确打开方式。

2026-01-30 15:04