CSS实现移动端3个水平盒子紧贴排列的方法

目标效果参考：

不需要修改现有HTML结构，也不会影响桌面端原有展示，只需要在原有CSS代码末尾追加以下移动端专属媒体查询样式即可：

/* 屏幕宽度小于768px（移动端）时生效 */
@media (max-width: 767px) {
  .m-image {
    /* 左浮动实现横向排列，消除inline-block元素因代码换行产生的默认间隙 */
    float: left;
    /* 三个盒子平分总宽度，边框计入盒模型尺寸，避免总宽度溢出换行 */
    width: 33.3333%;
    box-sizing: border-box;
    /* 清除原有上下外边距，实现盒子间完全紧贴 */
    margin: 0;
    /* 高度自适应图片内容 */
    height: auto;
  }
  .m-image img {
    /* 消除图片底部默认的行内空白间隙 */
    display: block;
    width: 100%;
    height: 100%;
    /* 图片自动裁切适配盒子，不变形 */
    object-fit: cover;
  }
  /* 清除浮动，避免父元素高度塌陷 */
  body::after {
    content: "";
    display: block;
    clear: both;
  }
}

关键规则说明 #

• 所有样式包裹在max-width: 767px的媒体查询中，仅在移动端触发，完全不改动桌面端原有效果
• 之前调整display和flex不生效的核心原因是没有同步修改元素宽度、清除默认margin、处理盒模型尺寸，导致元素总宽度超出容器无法横向排列
• box-sizing: border-box保证5px的虚线边框不会额外增加盒子宽度，三个33.3333%宽度的盒子刚好占满整行
• object-fit: cover保证图片不会被拉伸变形，自动适配盒子尺寸

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