18年沉淀高端建站经验
为企业持续赋能品牌新价值
资讯页和产品详情页都有大量图文混排，排得规整的页面读起来顺畅，排乱了的页面图片忽大忽小、文字贴着图片走，观感立刻掉档。混排乱不乱，差别只在有没有规矩，把六条规矩定死，谁排版都不会乱。
混排最基本的比例是一段文字配一张图，图片紧跟在它说明的那段之后。两张图连排中间没有文字过渡，页面就成了图片墙；三段文字才出一张图，图片又显得孤立。按这个比例排，段落节奏自然形成。
正文插图统一占内容区全宽，小图（图标、截图说明）统一用半宽居左或居右。只有两档宽度，页面整齐；三档以上就会显得杂乱。图片高度按原始比例缩放，禁止强行拉变形。
图片和上下文字之间留出8到16px间距，两张相邻图片之间留16px以上。图片贴着文字会让段落粘连，读的时候分不清图文边界。
| 规矩 | 参数 | 解决什么 |
|---|---|---|
| 图文配比 | 一段文字一张图 | 节奏稳定 |
| 图片宽度 | 全宽与半宽两档 | 版面整齐 |
| 图文间距 | 8-16px | 边界清晰 |
| 对齐方式 | 文字两端对齐或居左统一 | 消除参差感 |
| 图片说明 | 配图统一加一行小字说明 | 信息完整 |
| 移动端 | 小图转全宽显示 | 小屏可读 |
这六条别靠编辑每次手动设置，直接写进编辑器的默认样式里，插入图片自动套全宽样式。版式规矩一旦固化成样式，内容再多人维护也不会乱。首屏大图的取舍是另一套逻辑，之前写过一篇 target="_blank"，可以对照着看。
