使用CSS column简写属性导致布局异常：元素跨列拆分

问题核心 #

你用CSS Columns实现Unsplash式图片流时，移除按钮容器的绝对定位后，出现图片留在某列底部、按钮跳到下一列顶部的异常——这是因为Columns布局默认会自动拆分文档流内容来填充列，当图片和按钮同属一个正常流容器时，容器可能被拆分成两部分；而按钮绝对定位时脱离了文档流，容器高度由图片决定，整个容器作为一个整体被列布局处理，因此不会出现拆分。

修复方案 #

给每个<Image>组件的根容器添加break-inside: avoid属性，强制列布局不拆分这个容器单元：

.image-item-container {
  break-inside: avoid;
  /* 可选：兼容旧版浏览器 */
  page-break-inside: avoid;
}

这个属性会告诉浏览器：不要在该元素内部或元素本身进行列（或分页）拆分，确保每个图片+按钮的容器作为完整块被放入某一列，不会出现跨列拆分的情况。

验证说明 #

• 该属性兼容所有现代浏览器（Chrome、Firefox、Safari、Edge），无需额外兼容代码
• 不影响现有无限滚动功能，仅改变列布局对容器的拆分规则，不改动容器的文档流高度和滚动检测逻辑
• 无需改用Grid/Flex或MUI组件，完全基于现有Columns布局完成修复

内容的提问来源于stack exchange，提问作者Kiszuriwalilibori