图片在多列中被劈开不是“错”，而是未声明保护边界——CSS多列默认将img视为可断内容，需用figure等块容器包裹并设break-inside:avoid才能防止断裂。
为什么图片在多列中被劈开不是“错”，而是没声明保护边界
多列布局下 <img> 被硬生生切在两列之间，不是浏览器 bug，是默认行为——CSS 多列流把图片当作可断内容处理。除非你明确告诉它“这个图不能切”，否则 Safari、Chrome、Firefox 都会照切不误。而 break-inside: avoid 是唯一能起效的声明，但它只对块级直接子元素生效，<img> 本身是内联替换元素，直接加无效。
必须给图片套一层块容器并设 break-inside: avoid
直接给 <img> 加 break-inside: avoid 没用，浏览器会忽略。正确做法是包一层语义清晰的块容器：
- 用
<figure>包裹<img>和<figcaption>，再对<figure>设display: block和break-inside: avoid - 若用自定义卡片（如
<div class="card">），确保该<div>是多列容器的直接子元素，且display为block（不能是flex或grid） - 避免用
float或inline-block，这两者会让break-inside彻底失效
小屏响应式切换时列数重排导致防护失效
媒体查询里写 @media (max-width: 768px) { column-count: 1; } 看似合理，但列数突变瞬间，浏览器可能来不及重新评估 break-inside 约束，导致卡片仍被撕裂。更稳的做法是：
- 优先用
column-width: 20em替代column-count，让浏览器按内容宽度自动算列数，避免强制重排 - 如果必须用
column-count，搭配column-fill: auto（别用默认的balance），减少列高拉齐带来的布局抖动 - 小屏下除了设
column-count: 1，还要显式重置column-gap: 0，否则默认间隙会在单列时制造左侧偏移
Safari 和旧 WebView 中的兼容性补丁不能省
iOS Safari ≤15.6 对 break-inside: avoid 支持不稳定，部分版本只认旧语法；Android WebView（尤其基于旧 Chromium）也可能跳过该声明。必须加前缀和降级：
立即学习“前端免费学习笔记（深入）”；
- 写成
break-inside: avoid; -webkit-column-break-inside: avoid; - 打印场景需额外加
page-break-inside: avoid，因为break-inside不管分页逻辑 - 若目标环境含大量 iOS 14.x 设备，考虑 fallback：用
column-span: all把整张图提为跨列块（但会破坏列内流式排版）
真正难处理的不是怎么写样式，而是判断“谁该被保护”——<p> 和 <h2> 不用加 break-inside，它们本就该断；但一张带说明的课程海报卡片、一个 WiFi 连接二维码模块，一旦被劈开，信息就废了。防护粒度要落在语义块上，而不是元素类型上。
