使用CSS column-count实现瀑布流布局时如何让文字显示在对应图片下方

问题根因 #

你遇到的错位是column-count多列布局的默认特性导致的：当子元素的高度刚好卡在两列的分界位置时，浏览器会自动把元素拆成两部分，就出现了图片留在上一列底部、文本跑到下一列顶部的错位情况。

修复方案 #

你只需要调整CSS代码即可，修改点如下：

1. 给.product-item添加break-inside: avoid属性，禁止浏览器拆分单个商品卡片的内容
2. 补全column-gap的单位，你原来漏写了单位会导致属性不生效
3. 可选添加display: inline-block和width: 100%兼容老旧浏览器表现

调整后的完整CSS代码： #

#front-items {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
    column-count: 2;
    column-gap: 15px; /* 补全单位，数值可按需调整 */
    height: auto;
}

.product-item {
    height: auto;
    margin-bottom: 10px;
    break-inside: avoid; /* 核心修复：禁止拆分元素 */
    display: inline-block; /* 兼容低版本浏览器 */
    width: 100%;
}

.product-image {
    width: auto;
}

.product-image img {
    max-width: 100%;
    border-radius: 15px;
}

.product-title {
    text-align: left;
}

修改后刷新页面就能看到每个商品的图片和标题都会绑定在一起，不会再出现错位拆分的问题。

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