float布局的图片画廊多行标题导致图片错位该如何解决

问题原因 #

这是浮动布局的经典高度不一致错位问题：

• 你给.item设置了float:left，浮动元素不会撑开父容器高度，且如果同一行内有元素高度比其他元素高，下一行的浮动元素会优先卡在这个高元素的右侧，不会自动换到最左侧，就出现了你截图里的错位情况。
• 你给.item设置的padding-bottom:80px是底部内边距，但标题文本换行后整体高度还是会超过其他只有单行标题的item，就触发了这个问题。

解决方案 #

推荐两种可直接落地的方案，优先选方案2，适配性更强：

方案1：保留浮动布局，强制每行第一个元素清除左浮动 #

你可以根据自己一行展示的item数量，用:nth-child选择器给每行第一个元素加清除浮动规则，比如你当前容器宽度一行放2个的话，就添加如下CSS：

/* 一行放2个的情况，每第1、3、5...个item清除左浮动 */
.item:nth-child(2n + 1) {
  clear: left;
}
/* 如果一行放3个就改成 3n +1，以此类推 */

同时可以给标题元素加固定高度，避免高度差过大：

#photo {
  height: 40px; /* 按你最大需要的标题行数设置高度，比如2行就设40px，3行设60px */
  line-height: 20px;
  overflow: hidden; /* 可选，超出高度的文字隐藏 */
}

方案2：替换浮动为flex布局，从根本上解决错位问题 #

直接修改#index-gallery和.item的CSS，不用浮动，flex的自动换行特性会自动处理高度对齐问题：

#index-gallery{
    position: relative;
    top: -160px;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
    /* 新增flex相关规则 */
    display: flex;
    flex-wrap: wrap;
    gap: 35px; /* 替换原来的item左右margin，控制item之间的间距，数值可以自己调整 */
}
.item{
    /* 删除原来的float:left、margin-left、margin-right规则 */
    width:200px;
    text-align:center;
    display:block;
    background-color: transparent;
    border: 1px solid transparent;
    margin-bottom: 1px;
    padding-bottom: 80px;
}

flex布局会自动让同一行的所有item高度和当前行最高的那个item保持一致，不会出现浮动的卡边错位问题，后续修改一行展示数量也不用调整清除浮动的规则，维护成本更低。

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