图片在多列中被劈开不是“错”，而是未声明保护边界——css多列默认将img视为可断内容，需用figure等块容器包裹并设break-inside:avoid才能防止断裂。

为什么图片在多列中被劈开不是“错”，而是没声明保护边界

多列布局下 <img> 被硬生生切在两列之间，不是浏览器 bug，是默认行为——CSS 多列流把图片当作可断内容处理。除非你明确告诉它“这个图不能切”，否则 Safari、Chrome、Firefox 都会照切不误。而 break-inside: avoid 是唯一能起效的声明，但它只对块级直接子元素生效，<img> 本身是内联替换元素，直接加无效。

必须给图片套一层块容器并设 break-inside: avoid

直接给 <img> 加 break-inside: avoid 没用，浏览器会忽略。正确做法是包一层语义清晰的块容器：

• 用 <figure></figure> 包裹 <img> 和 <figcaption></figcaption>，再对 <figure></figure> 设 display: block 和 break-inside: avoid
• 若用自定义卡片（如 <div class="card">），确保该 <code><div> 是多列容器的直接子元素，且 <code>display 为 block（不能是 flex 或 grid）
• 避免用 float 或 inline-block，这两者会让 break-inside 彻底失效

小屏响应式切换时列数重排导致防护失效

媒体查询里写 @media (max-width: 768px) { column-count: 1; } 看似合理，但列数突变瞬间，浏览器可能来不及重新评估 break-inside 约束，导致卡片仍被撕裂。更稳的做法是：


CSS婚礼策划服务机构宣传网站模板
CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。
下载
• 优先用 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></p> 和 <h2></h2> 不用加 break-inside，它们本就该断；但一张带说明的课程海报卡片、一个 WiFi 连接二维码模块，一旦被劈开，信息就废了。防护粒度要落在语义块上，而不是元素类型上。