CSS两列布局问题：第一列最后一个div被拆分

嘿，这个问题我之前做响应式画廊的时候也踩过坑！这是CSS多列布局里典型的列断行问题——Chrome为了尽可能填满列空间，会把你的卡片容器（图片+页脚）拆分成两部分跨列显示。

核心解决方案：阻止卡片内部断行 #

给包裹图片和页脚的卡片容器加上下面的CSS属性，就能强制让整个卡片保持在同一列里：

.card-container {
  /* 标准属性 */
  break-inside: avoid;
  /* 兼容旧版Chrome和Safari */
  -webkit-column-break-inside: avoid;
}

break-inside: avoid 的作用很直白：告诉浏览器不要在这个元素内部进行列（或分页）断行，确保整个卡片是一个完整的块级单元，不会被拆分。

完整示例代码参考 #

结合你提到的布局结构，这里给你一个能正常工作的样式参考：

#columns {
  line-height: 0;
  display: block;
  column-count: 2;
  column-gap: 15px; /* 列之间的间距，可按需调整 */
}

.card-container {
  margin-bottom: 15px; /* 卡片之间的垂直间距 */
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
}

.card-container img {
  width: 100%; /* 图片自适应列宽 */
  height: auto; /* 保持图片比例 */
}

.card-footer {
  line-height: 1.6; /* 恢复正常行高，避免文字挤在一起 */
  padding: 8px 10px;
  background-color: #f8f8f8;
  color: #333;
}

额外注意事项 #

• 确保你的.card-container是块级元素，不要给它设置float属性，否则break-inside可能失效
• 如果遇到极端兼容问题，可以额外加上 page-break-inside: avoid（这个属性原本用于分页，但多列布局也会识别它）

调整后，每张卡片的图片和页脚就都能完整地留在同一列里啦！

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