brizy图文不对齐主因是默认flex布局未设align-items，导致浏览器渲染差异；应通过layout面板设align items为center或stretch，避免用text block插入图片、float及无效css，优先使用模块化样式控制。
Brizy 里图片和文字不对齐？默认 flex 布局在作怪
Brizy 默认把图文容器设为 display: flex，但没显式设 align-items，结果不同浏览器渲染不一致——Chrome 可能顶对齐，Safari 却基线对齐，文字看起来“飘”在图片上方。
- 用 Brizy 编辑时，选中包含图片+文字的 Section 或 Column，点右侧面板「Layout」→ 找到
Align Items，改成Center或Stretch（后者更稳） - 如果只改局部，别碰全局 CSS；Brizy 的「Custom CSS」框里加
.brz-section img { vertical-align: middle; }是无效的，因为 inline 样式被 flex 覆盖了 - 避免用
<img>直接插进文本块（Text Block），Brizy 会把它当内联元素处理，对齐逻辑完全不同；应该用独立的Image模块 + 旁边放Text模块
文字绕图（图文混排）在 Brizy 里根本不能靠 float
Brizy 不支持传统 HTML 的 float，强行加 style="float: left" 到 <img> 标签里，编辑器会自动剥离，前端也可能失效。
- 正确做法：用 Brizy 的
Grid或Flex容器，把图片模块设为固定宽度（比如30%），文字模块设为70%，再设容器Flex Direction: Row - 如果要响应式断行（小屏时图片在上、文字在下），必须开启容器的
Wrap，并给图片模块加Min Width（如200px），否则窄屏下文字会被压缩变形 - 别依赖「Text Block」里的「Insert Image」按钮——它生成的是内联
<img>，没有独立样式控制权，对齐和环绕都不可靠
Brizy 导出的 HTML 里 class 名带 hash，自定义 CSS 很难精准命中
Brizy 构建时会给每个模块生成随机 class 名（如 brz-abc123），直接写 .brz-image { ... } 在预览里有效，但发布后可能失效。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 优先用 Brizy 自带的样式面板调：选中图片 → 「Styling」→ 「Spacing」调
Margin和Padding，比写 CSS 更可靠 - 真要写 CSS，用属性选择器兜底，比如
[data-brz-image] { margin-right: 1rem; }，这个不会被 hash 影响 - 避免用
!important强覆盖——Brizy 内联样式优先级极高，!important容易在后续更新中引发冲突，尤其升级 Brizy 后样式突然错乱
移动端图文错位？不是没设置响应式，是断点值被忽略
Brizy 的断点（Breakpoint）默认是 992px（桌面）、768px（平板）、480px（手机），但很多人只在桌面视图调对齐，忘了切换到手机视图再单独调一次。
- 操作路径：顶部工具栏点
? Mobile图标 → 选中图文容器 → 「Layout」里重新设Flex Direction: Column（让图在上、文在下） - 图片模块在移动端若设了固定高度（如
200px），容易撑开布局；建议用Aspect Ratio（如4:3）替代，更安全 - 文字模块的
Line Height在小屏下如果还是1.2，可能显得拥挤；切到手机视图后手动调成1.5，Brizy 会自动加媒体查询
Brizy 的对齐问题，本质是它用现代 CSS 布局（flex/grid）替代了传统文档流，但界面没暴露所有底层控制项。最稳的路不是硬套 HTML 思维，而是顺着它的模块化逻辑——图片归图片模块管，文字归文字模块管，容器负责协调。一上来就扒源码加 class，反而容易掉进 hash 和内联样式的坑里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
