Web游戏程序化生成图层的横向对齐问题求助

看起来你遇到了图层没法在横向滚动容器里并排显示的问题，我来帮你分析下原因和解决办法：

问题根源 #

你给.dimContainers设置了display: inline-block，但inline-block元素默认会遵循文本流的换行规则——当容器宽度装不下所有元素时，它们就会自动换行到下一行，而不是触发容器的横向滚动。再加上你没处理容器的换行行为，就出现了图层“跑到下面”的情况。另外你代码里还有个小笔误：创建图层的HTML里，dimContainers的class属性引号没闭合（class="dimContainers id="dimContainer1"），这个也可能导致样式异常，记得修正。

解决方案 #

这里有两个简单有效的修复方案，选你顺手的就行：

方案1：用Flex布局替代inline-block（推荐）

把#mainContainer改成flex布局，子元素会默认横向排列且不自动换行，完美适配横向滚动需求：

#mainContainer {
  overflow-y: scroll;
  overflow-x: scroll;
  height: 850px;
  width: 100%;
  /* 新增Flex相关属性 */
  display: flex;
  flex-wrap: nowrap; /* 强制子元素不换行 */
  align-items: flex-start; /* 让图层顶部对齐，避免被拉伸 */
}

/* 可以删掉.dimContainers里的display: inline-block了 */
.dimContainers {
  margin-right: 15px;
  width: 250px;
  height: auto;
  background-color: rgb(49, 107, 107);
}

方案2：给容器设置white-space: nowrap（兼容旧浏览器）

如果不想换Flex布局，也可以给#mainContainer加white-space: nowrap，同时给.dimContainers加上vertical-align: top解决底部对齐的问题：

#mainContainer {
  overflow-y: scroll;
  overflow-x: scroll;
  height: 850px;
  width: 100%;
  white-space: nowrap; /* 强制文本/inline元素不换行 */
}

.dimContainers {
  margin-right: 15px;
  width: 250px;
  height: auto;
  background-color: rgb(49, 107, 107);
  display: inline-block;
  vertical-align: top; /* 让图层顶部对齐，避免错位 */
}

内容来源于stack exchange