如何用HTML/CSS实现移动端与平板端图片直线对齐

首先咱们来拆解下问题根源：你当前的flex-wrap: wrap在桌面端空间充足时能让图片正常横向排列，但到了移动端，容器宽度收缩后图片会自动换行，再加上justify-content: space-between的作用，换行后的每行元素会被强制两端对齐，视觉上就显得杂乱无章了。而你之前添加的媒体查询只是重复了原有样式，没有针对移动端的布局痛点做调整，所以才没起到效果。

下面给你两个针对性的解决方案，你可以根据实际需求选择：

方案一：强制图片始终横向排列（支持横向滚动） #

如果希望所有设备上图片都保持直线对齐，哪怕移动端空间不足也不换行，可以修改媒体查询代码如下：

@media only screen and (max-width: 768px) {
  .images {
    width: 100%;
    flex-wrap: nowrap; /* 禁止图片换行 */
    overflow-x: auto; /* 开启横向滚动，适配窄屏 */
    padding-bottom: 0.5rem; /* 给滚动条预留空间，可选优化 */
  }
  .images img {
    flex-shrink: 0; /* 禁止图片被压缩变形 */
    width: auto;
    height: 2.5rem;
  }
}

这个方案会让图片在移动端保持一行排列，超出容器宽度时可横向滚动，完美还原桌面端的直线对齐效果。

方案二：换行后保持每行图片左对齐（避免两端分散） #

如果你允许图片在移动端换行，但希望每行图片整齐靠左排列，而非两端分散，可以调整justify-content的值并添加固定间距：

@media only screen and (max-width: 768px) {
  .images {
    width: 100%;
    justify-content: flex-start; /* 改为左对齐 */
    gap: 1rem; /* 给图片之间添加均匀间距，替代space-between的分散效果 */
  }
  .images img {
    width: auto;
    height: 2.5rem;
  }
}

这样换行后的每行图片都会整齐靠左，且间距均匀，视觉上会规整很多。

你可以根据自己的布局需求选择其中一个方案，测试后就能解决移动端图片混乱的问题啦。

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