如何在同一行对齐3张带说明文字的响应式图片

问题根因 #

• 你给图片类.d-img设置了固定宽度500px，仅3张图片的总宽度就已经远大于外层容器的最大宽度960px，再加上.category设置的30px内边距，整体宽度溢出，页面缩小时元素自然会折行
• .category同时设置了display: inline-block和float: left，两个布局属性冲突，且浮动布局本身在容器宽度不足时就会自动触发折行
• 包裹3个图片模块的父容器.inner-inner没有做响应式多列布局适配

解决方法 #

推荐使用Flex弹性布局实现稳定的同列响应式效果，修改代码如下：

新增/修改CSS样式 #

/* 给父容器新增flex布局属性 */
.inner-inner {
  display: flex;
  justify-content: space-between;
  gap: 30px; /* 控制图片模块之间的间距，替代原padding */
  max-width: 960px;
  margin: 0 auto;
  /* 如果需要极小窗口下允许折行避免内容过小，可新增以下属性：
  flex-wrap: wrap;
  */
}

/* 修改category样式，删除冲突属性 */
.category {
  flex: 1; /* 3个模块平分父容器宽度 */
  text-align: center;
  /* 删掉原有代码：float: left; display: inline-block; padding:30px; */
}

/* 修改图片样式，实现自适应 */
.d-img {
  width: 100%;
  height: auto; /* 保持图片宽高比不变 */
}

如果需要兼容极低版本浏览器，也可以用百分比布局实现：

.inner-inner {
  max-width: 960px;
  margin: 0 auto;
  /* 清除浮动 */
  overflow: hidden;
}
.category {
  width: 33.33%;
  box-sizing: border-box; /* 把padding计算在宽度内 */
  padding: 0 15px;
  float: left;
  text-align: center;
}
.d-img {
  width: 100%;
  height: auto;
}

修改后3个图片模块会始终保持在同一行，随页面宽度等比缩放，不会出现折行问题。如果需要移动端适配，可给.inner-inner添加flex-wrap: wrap属性，同时给.category设置min-width: 240px，页面缩小到一定程度后会自动折行，避免内容过小无法查看。

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