如何移除横向排列的两张图片间的过大空白并实现居中对齐

数据老陈

2026-10-6

问题原因

你当前使用的是Flex布局，.campus-col设置了flex-basis: 32%，两个子元素总宽度仅占父容器的64%，剩余空间被Flex默认的对齐规则分配，才会出现过大空白。你之前尝试的inline-block、font-size: 0是用于解决inline/inline-block元素的默认字符间隙问题，对Flex子项不生效，所以没有效果。

解决代码

你只需要给父容器.row添加Flex布局控制属性，同时调整.campus-col的宽度配置即可，修改后的完整CSS如下：

*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
/* 新增父容器布局配置 */
.row {
  display: flex;
  justify-content: center; /* 实现两张图片水平居中 */
  gap: 16px; /* 自定义两个图片之间的间距，数值可随意调整 */
}
.campus-col{
    flex-basis: 42%; /* 从32%调整为合适的宽度，两个子项加起来加上gap的宽度不要超过100%即可 */
    max-width: 450px; /* 可选：添加最大宽度避免大屏下图片拉伸过度 */
    border-radius: 10px;
    margin-bottom: 30px;
    position: relative;
    overflow: hidden;
}
.campus-col img{
    width: 100%;
    display: block; 
}
.layer{
    background: transparent;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transition: 0.5s;
}
.layer:hover{
    background: rgba(226,0,0,0.7);
}
.layer h3{
    width: 100%;
    font-weight: 500;
    color: #fff;
    font-size: 26px;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    position: absolute;
    opacity: 0;
    transition: 0.5s;
}
.layer:hover h3{
    bottom: 49%;
    opacity: 1;
}