脉冲星数据处理闭环：psrchive+pgplot+tempo本地化实践
2026/10/18 14:28:58
图片嵌入文字的几种方法
图片与文字的排版关系，是网页设计中的基础技能。下面按"从简单到复杂"的顺序，逐一讲解每种方法的特点、代码和适用场景。
一、直接插入法（<img>行内图片）
原理
<img>是行内块元素（inline-block），默认会和文字在同一行排列，图片底部与文字基线对齐。
<p>西湖的景色真<imgsrc="img/xihu.jpg"alt="西湖"style="width:60px;">让人流连忘返。</p>效果：图片像一个大号文字，夹在句子中间。
适用场景：表情符号、行内小图标。
二、浮动环绕法（float+ 文字环绕）
原理
让图片"浮动"到左/右侧，文字自动环绕在图片周围。这是杂志排版最常用的效果。
<p><imgsrc="img/xihu.jpg"alt="西湖"style="float:left;width:200px;margin:0 15px 10px 0;">清晨六点，我从酒店出发，沿着北山街慢慢走向湖边。晨雾还未散去，湖面像一层轻纱...</p>关键属性
| 属性 | 值 | 效果 |
|---|---|---|
float: left | 左浮动 | 图片靠左，文字在右侧环绕 |
float: right | 右浮动 | 图片靠右，文字在左侧环绕 |
margin | 外边距 | 控制图片与文字的间距 |
效果示意：
┌────────┐ 清晨六点，我从酒店 │ │ 出发，沿着北山街慢慢 │ 图片 │ 走向湖边。晨雾还未散去， │ │ 湖面像一层轻纱... └────────┘ 继续环绕...适用场景：图文混排的文章段落（报纸、杂志风格）。
三、垂直对齐法（vertical-align）
原理
控制图片在一行文字中的垂直位置（默认是基线对齐）。
<p>文字<imgsrc="img/icon.png"style="vertical-align:middle;">中间对齐</p>常用值
| 值 | 效果 |
|---|---|
baseline（默认） | 图片底部与文字基线对齐 |
top | 图片顶部与文字顶部对齐 |
middle | 图片中部与文字中部对齐 |
bottom | 图片底部与文字底部对齐 |
text-top | 图片顶部与文字顶部对齐 |
text-bottom | 图片底部与文字底部对齐 |
适用场景：行内图标与文字的对齐（如导航图标+文字）。
四、背景图法（background-image）
原理
把图片作为元素的背景，文字浮在图片之上。
<divstyle="background-image:url('img/bg.jpg');background-size:cover;width:400px;height:200px;color:white;padding:20px;"><h2>西湖晨雾</h2><p>清晨的湖面如诗如画...</p></div>特点
- ✅ 文字可以叠加在图片上
- ✅ 图片尺寸可以用
background-size精确控制 - ❌ 图片不会被搜索引擎收录（SEO 不友好）
- ❌ 图片无法被用户右键保存
适用场景：banner 横幅、带文字的封面图。
五、语义化图文法（<figure>+<figcaption>）
原理
HTML5 提供的语义化标签，专门用于"图片+图注"的组合，图片与文字是一个整体单元。
<figurestyle="float:right;margin:0 0 10px 15px;text-align:center;"><imgsrc="img/xihu.jpg"alt="西湖"style="width:200px;"><figcaption>图1 西湖晨雾</figcaption></figure><p>清晨六点，我从酒店出发，沿着北山街慢慢走向湖边...</p>特点：
- 图片与图注语义绑定
- 对搜索引擎和屏幕阅读器友好
- 本案例 article.html 用的就是这种方式
适用场景：文章中的插图（带图注）。
六、弹性布局法（display: flex）
原理
用 Flex 布局让图片和文字并排放置，精确控制比例和对齐。
<divstyle="display:flex;gap:20px;align-items:center;"><imgsrc="img/xihu.jpg"alt="西湖"style="width:200px;"><p>清晨六点，我从酒店出发，沿着北山街慢慢走向湖边...</p></div>效果：图片和文字左右并排，垂直居中对齐。
适用场景：商品卡片、个人介绍、左右分栏布局。
七、网格布局法（display: grid）
原理
用 CSS Grid 实现图文的网格排版，适合多图多文的复杂布局。
<divstyle="display:grid;grid-template-columns:200px 1fr;gap:15px;align-items:center;"><imgsrc="img/xihu.jpg"alt="西湖"><p>清晨六点，我从酒店出发...</p><imgsrc="img/sudi.jpg"alt="苏堤"><p>午后，我从苏堤春晓出发...</p></div>适用场景：图文交替排列、多列图文列表。
八、方法对比总表
| 方法 | 核心属性 | 文字与图片关系 | 适用场景 | 难度 |
|---|---|---|---|---|
| 直接插入 | <img> | 同一行 | 行内小图标 | ★☆☆ |
| 浮动环绕 | float | 文字环绕图片 | 杂志图文混排 | ★★☆ |
| 垂直对齐 | vertical-align | 控制垂直位置 | 图标+文字对齐 | ★★☆ |
| 背景图 | background-image | 文字叠在图上 | banner 封面 | ★★☆ |
| 语义化图文 | <figure> | 图+图注整体 | 文章插图 | ★★☆ |
| 弹性布局 | flex | 并排分栏 | 卡片、介绍 | ★★★ |
| 网格布局 | grid | 多列网格 | 复杂图文排版 | ★★★★ |
九、教学建议
- 入门阶段：先讲方法一（直接插入）和方法二（float 环绕），这是最基础、最常用的。
- 进阶阶段：引入方法五（figure 语义化），体现 HTML5 的价值。
- 布局阶段：讲方法六（flex）和方法七（grid），替代传统 float 布局。
- 对比演示：可以把同一张图片用不同方法嵌入同一段文字，让学生直观看到效果差异。
最常用的组合是：<figure>包裹<img>+float实现环绕，兼顾语义与排版效果，这也是本案例采用的方式。