Rails应用中图片预览横向对齐问题求助（含JS及Sass代码）

嘿，要让你的预览图片横向并排其实很简单——问题出在你动态生成的每个图片容器<div>默认是块级元素，所以会自动占满一行并换行。咱们通过调整CSS就能轻松解决，这里给你两种实用的方案：

方案1：使用Flexbox布局（推荐） #

Flexbox是现代CSS布局的首选，它能让容器内的元素自动横向排列，还能轻松处理换行和间距。你只需要修改你的Sass代码，给.image-box添加Flex相关属性：

.image-box 
  text-align: center 
  font-size: 18px 
  margin: auto 
  width: auto 
  height: auto
  // 新增Flex布局属性
  display: flex
  flex-wrap: wrap // 当容器宽度不够时自动换行
  justify-content: center // 可选：让图片在容器内居中排列
  gap: 10px // 可选：设置图片之间的间距，替代margin更直观
  
  .thumb 
    width: 90px 
    height: 90px 
    margin: 0.2em 0 0.3em 0 // 修正原margin的笔误，避免不必要的负边距
  
  .remove_img_preview 
    position: relative 
    top: -25px 
    right: 5px 
    background: black 
    color: white 
    border-radius: 50px 
    font-size: 0.9em 
    padding: 0 0.3em 0 
    text-align: center 
    cursor: pointer 
    
    &:before 
      content: "×"

方案2：使用inline-block让容器并排 #

如果你需要兼容更旧的浏览器，可以给每个图片容器添加类名，然后设置display: inline-block：

步骤1：修改JS代码，给动态生成的div添加类名 #

在创建div的时候，新增一行代码添加类：

var div = document.createElement("div");
div.classList.add('preview-item'); // 新增这行
div.innerHTML = ['<img class="thumb" src="', picFile.result, '" title="', picFile.name, '"/><span class="remove_img_preview"></span>'].join('');

步骤2：修改Sass代码，设置预览项为inline-block #

.image-box 
  text-align: center 
  font-size: 18px 
  margin: auto 
  width: auto 
  height: auto
  
  .preview-item
    display: inline-block
    margin: 0 10px 10px 0 // 设置项之间的间距
    vertical-align: top // 避免元素错位
    
  .thumb 
    width: 90px 
    height: 90px 
    margin: 0.2em 0 0.3em 0 // 修正原margin笔误
  
  .remove_img_preview 
    position: relative 
    top: -25px 
    right: 5px 
    background: black 
    color: white 
    border-radius: 50px 
    font-size: 0.9em 
    padding: 0 0.3em 0 
    text-align: center 
    cursor: pointer 
    
    &:before 
      content: "×"

额外小提示 #

你原来的.thumb样式里margin: 0.2em -0.7em 3 0中的3是无效值，建议改成0.3em或者3px，避免出现意外的布局错乱。

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