CSS：如何让3个带背景图的div水平排列且等宽？

基于你现在用inline-block实现横向排列的代码结构，要达成100%宽度三等分的效果，只要解决inline-block自带的两个排版坑、调整宽度计算逻辑就行，下面两种方案可以直接套用：

方案1：最小改动，保留现有inline-block写法 #

inline-block实现等分最大的两个原生问题：一是元素间会有默认字符级间隙，三个元素就算各设33.333%的宽度，加间隙也会撑到换行；二是如果不设盒模型规则，后续加内边距、边框很容易把宽度撑超父容器。
对应调整只需要补几行配置：

• 给三个元素的公共样式加width: 33.333%、box-sizing: border-box
• 给三个div的父容器加font-size: 0，消掉inline-block的字符间隙，再把div本身的字号设回正常大小，避免div内的文字跟着被清零

改造后的完整代码：

/* 三个div的父容器配置 */
.parent {
  font-size: 0;
}

.div-1,
.div-2,
.div-3 {
  display: inline-block;
  width: 33.333%; /* 三等分单块宽度 */
  box-sizing: border-box;
  font-size: 16px; /* 还原被父容器清零的文字大小 */
  background-size: cover;
  background-position: 50% 50%;
}

/* 保留你原有单独的背景配置，记得修正路径拼写错误 */
.div-1 {
  background: url('images/image1.jpg'); /* 原代码里iamge是拼写错误，已修正 */
}
.div-2 {
  background: url('images/image2.jpg');
}
.div-3 {
  background: url('images/image3.jpg');
}

方案2：推荐的Flex自动等分写法 #

如果不需要兼容十年前的老旧浏览器，完全没必要手动算百分比宽度、手动处理间隙，Flex布局几行代码就能实现自动等分，后续就算调整元素数量，也不用重新计算宽度值：
只需要给父容器开启Flex布局，给三个div加flex: 1属性，浏览器会自动把父容器宽度平分给所有带flex:1的子元素，根本不存在间隙、宽度算错的问题。
对应代码：

/* 三个div的父容器配置 */
.parent {
  display: flex;
}

.div-1,
.div-2,
.div-3 {
  flex: 1; /* 自动平分剩余宽度，3个元素刚好各占1/3 */
  min-width: 0; /* 避免内部内容撑破宽度的常见bug */
  box-sizing: border-box;
  background-size: cover;
  background-position: 50% 50%;
}

/* 单独的背景配置和上面一致 */
.div-1 {
  background: url('images/image1.jpg');
}
.div-2 {
  background: url('images/image2.jpg');
}
.div-3 {
  background: url('images/image3.jpg');
}

容易踩的小提醒：你原来的代码里.div-1的背景图路径写的是iamge1.jpg，少了一个字母m，不修正的话会直接导致背景图加载失败。

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